Cubic-bezier curve generator

The easing curve (timing function) decides how a CSS transition or animation progresses over time. Drag the two control points, test the result in the sample animation and copy the cubic-bezier() value.

What is cubic-bezier()?

The transition-timing-function and animation-timing-function properties (or the third value of transition) define how the change is distributed over the duration. cubic-bezier(x1, y1, x2, y2) defines a cubic Bézier curve that starts at (0, 0) and ends at (1, 1) with two control points: the X axis is time and the Y axis is progress.

The CSS keywords are predefined curves: ease equals cubic-bezier(0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) and ease-in-out (0.42, 0, 0.58, 1). The easeIn…/easeOut… curves are Robert Penner's classic easing equations, widely used in animation libraries.

Tips

X values must be between 0 and 1, but Y values can go beyond: below 0 or above 1 the animation overshoots and comes back, a soft bounce effect like easeOutBack. Elements entering the screen usually look best with ease-out curves, which start fast and slow down at the end; elements leaving, with ease-in curves.

Durations of 150 to 400 ms are the most common in user interfaces. Remember to respect the prefers-reduced-motion preference of people who prefer less animation.