Cubic Bezier Formula (CSS3 Transitions)

A curve defined by a cubic bezier formula can be thought of as a series of two GPS directions (P1 and P2) to get from a start point (P0) to a finish point (P3):

  1. Start at P0 going towards P1.
  2. Arrive at P3, coming from the direction of P2.

This means that depending on the location of P1 and P2, the curve may never pass through either of them, but simply go in their directions while travelling from P0 to P3.

The CSS3 Cubic Bezier formula provides a function where input (i.e. point of time between start and finish) can be turned into output (i.e. value of CSS property at a particular point of time during the transition).

To make things easier, the formula assumes the following presets:

  • P0:
    • Time starting point will be 0 on the X axis.
    • The current (pre-transition) value of the CSS property being transitioned will be 0 on the Y axis.
  • P3:
    • Time ending point will be 1 on the X axis.
    • The destination (post-transition) value of the CSS property being transitioned will be 1 on the Y axis.

Since this means that P0 and P3 are preset at 0,0 and 1,1 coordinates, the formula only needs the X and Y coordinates of P1 and P2 as follows:

cubic-bezier(P1x, P1y, P2x, P2y);

Given the formula assumptions above:

  • And since a transition cannot exist outside of its own time constraints, the value of the x coordinates can only be from 0 through 1.
  • However, since the value of the CSS property being transitioned can be any proper CSS value regardless of the context of time as long as it starts an ends at the pre-transition and post-transition values, the y coordinates can go beyond 0 and 1. A good example of this is where a value such as width goes beyond its post-transition value before the transition finishes, and returns to the post-transition value once the transition finishes, producing a swing effect.
Be Sociable, Share!