Application: Animation Timing for CSS3 Transitions with Cubic Bezier Curves

The Cubic Bezier Curve is commonly used as an animation timing function. Move the points to adjust the curve's shape.

Error: X values greater than 1 and less than 0 are not allowed because then the curve is no longer a function!

Warning: older webkit browsers do not support Y values greater than 1 or less than 0. However, you can acheive an interesting "bounce" effect with these values.

This document requires an HTML5-compliant browser.

Below is a preview of the Bezier Curve above when used as an animation timing function (top), relative to a linear animation. It uses CSS3 transitions, and animates the horizontal position and color properties.

Animate

cubic-bezier(x1,y1,x2,y2)
linear

To use this timing function as a CSS3 transition, use the following code: