This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



An animation timing function that describes a progression of movement as a cubic-bezier curve.

The function describes a cubic bezier curve starting at 0,0 and ending at 1,1. It accepts four arguments (x1, y1, x2, y2) that specify coordinates for the two control points that affect the shape of the curve. The following shows standard timing keyword values along with their functional equivalents. The x axis represents the elapsed time of the animation, and y represents the progression of movement, so the more the curve points upwards, the faster the animation moves at that point:

cubic-bezier(0.0, 0.0, 1.0, 1.0) transitF linear.png

cubic-bezier(0.25, 0.1, 0.25, 1.0) transitF ease.png

cubic-bezier(0.42, 0, 0.58, 1.0) transitF easeinout.png

cubic-bezier(0.42, 0, 1.0, 1.0) transitF easein.png

cubic-bezier(0, 0, 0.58, 1.0) transitF easeout.png

For properties unrelated to opacity and color, the function accepts y coordinates outside the standard range between 0 and 1. This allows for “elastic” effects in which positions or dimensions may cross over themselves during the course of the progression. The first example below bounces past its start and end points, while the second oscillates more dramatically:

cubic-bezier(0.25, -0.5, 0.75, 1.5) transitF cubicBounce.png

cubic-bezier(0.5, 2, 0.5, -1) transitF cubicWave.png


A dramatically oscillating timing function whose y values lie far outside the 0-1 range:

transition-timing-function: cubic-bezier(0.5,3.0,0.5,-2.0);

Modify the timing function for a sequence of two transitions

View live example

See also

Related articles