Cubic Bezier Easing Generator
Shape a cubic-bezier timing curve, watch it animate against linear, and copy the CSS, Tailwind or Web Animations code.
Shape an animation timing curve and watch it run, with overshoot supported and a live comparison to linear.
Curve
Your curve
Linear, for comparison
cubic-bezier(0.34, 1.56, 0.64, 1)
This curve overshoots, so the value passes its end point and comes back. That is what gives a bounce, but it breaks any property that cannot go out of range, such as opacity.
Only the y values may leave 0 to 1. The x values are time and must stay inside it, or the curve would need to run backwards.
.element {
transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}About the cubic bezier easing generator
Easing is what separates an animation that feels designed from one that feels mechanical. Nothing in the physical world moves at a constant speed, which is why linear reads as wrong even when the timing is right.
The four numbers in cubic-bezier are two control points. The x values are time and must stay between 0 and 1, because time cannot run backwards. The y values are progress and may leave that range, and that is exactly what produces overshoot and bounce.
How to use it
- 1Pick a preset or set the four control values.
- 2Watch your curve run against linear underneath it.
- 3Adjust until the motion feels right rather than looks right.
- 4Copy the CSS, Tailwind or Web Animations output.
Questions
Why can the y values go outside 0 to 1?
Because progress may overshoot its target and settle back, which is what makes a bounce. Time cannot, so the x values stay clamped.
When should I not use an overshooting curve?
On any property that cannot go out of range. Opacity above 1 or a colour past its end value will clamp, so the bounce disappears and the timing just looks off.
Which easing should I use by default?
Something close to ease-out for anything entering the screen, since it arrives fast and settles. Use ease-in for things leaving. ease-in-out suits movement between two on-screen positions.
How long should an interface animation be?
Usually 150 to 300 milliseconds. Longer than that starts to feel like waiting, however good the curve is.