About the Cubic Bezier Generator
Every CSS transition maps elapsed time onto progress, and cubic-bezier() is how you describe that mapping. The curve always starts at 0,0 and ends at 1,1; the four numbers you supply are the two control points that bend it in between. The horizontal axis is time and the vertical axis is how far the animation has travelled, so a curve that climbs steeply at the start means the motion begins fast and settles.
The plot here draws both handles alongside the curve, and the moving square underneath runs a real CSS animation using the value, so what you see is the browser interpolating rather than a simulation of it. Underneath the CSS, seven sampled points show the exact progress at fixed moments in time, which is useful when you need to match an easing curve to one specified in a design file or another platform.
Control point x values are limited to the range 0 to 1 because the specification requires it: a curve that doubles back in time is not a function and browsers reject it. The y values are free, and pushing y2 above 1 or y1 below 0 produces the overshoot and anticipation that make a bounce feel deliberate rather than sloppy. Keep durations short, roughly 150 to 300 milliseconds for interface feedback and up to 700 for a panel that slides. The generated value drops straight into a transition on a component from the CSS Button Generator.
How to use
- Pick a named preset to start from, or leave it on Custom and type the four control point numbers.
- Watch the moving square repeat the motion and read the plotted curve above it.
- Set the duration and property you plan to animate, then copy the transition and keyframe rules.
Common questions
- Why will the tool not let me set x1 above 1?
- The CSS specification restricts both x coordinates to the range 0 to 1. Outside it the curve is not a valid timing function and the browser falls back to a linear ease.
- How do I get a bounce at the end?
- Push y2 above 1, around 1.5, while keeping x2 near 0.6. The curve overshoots the finish line and comes back, which reads as a bounce.
- Is cubic-bezier the same as the ease keyword?
- The keywords are shorthand for specific curves. ease is cubic-bezier(0.25, 0.1, 0.25, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1).
- Can I use this for a keyframe animation?
- Yes. The output includes an animation-timing-function example. Note that on a keyframe animation the easing applies between each pair of keyframes, not across the whole sequence.