Animation with cubic Bezier

Cubic Bezier curve accept accept 4 parameters cubic-bezier(x1, y1, x2, y2) and have 4 points P0, P1, P2, P3:

• The start point P0 is fixed at (0, 0)
• The end point P1 is fixed at (1, 1)
• The intermediate points P1, P2 is respectively defined by x1, y1 and x2, y2
• X-axis represents input progress and y-axis represents output progress. Cause P0, P3 are fixed with x-axis 0-1, x-axis of P1, P2 need in range [0, 1] to make cubic Bezier curve function valid.

Some popular cubic Bezier functions:

• easeInSine
• easeOutSine
• easeInOutSine
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInBack
• easeOutBack
• easeInOutBack
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeIn
• easeOut
• easeInOut
• ease (normal)
• linear
• jump

References:

• ^[1] MDN
• ^[2] easings.net