CSS Cubic Bezier Generator
Note: The y axis is deliberately unclamped — above 1 the animation overshoots and settles back, below 0 it backs up before setting off. The x axis cannot leave 0–1, because that would place a control point outside the animation's own duration.
The two control points are what you drag. Their x values are clamped between 0 and 1 because time cannot run backwards, but y is deliberately not clamped — pulling a handle above 1 makes the animation overshoot its destination and settle back, which is the springy quality people usually mean by bouncy. Pulling below 0 makes it back up slightly before setting off, an anticipation that suggests weight.
Which end to weight depends on what is moving. Something entering the screen should decelerate into place, so ease-out: fast at first, slow at the end. Something leaving should accelerate away with ease-in, since nobody needs to watch it go. Something moving between two on-screen positions wants ease-in-out. Getting this backwards is what makes an interface feel sluggish even at a short duration — an ease-in entrance appears to hesitate before doing anything.
A note on the named keywords: ease is not symmetrical. It is cubic-bezier(0.25, 0.1, 0.25, 1), which front-loads the movement noticeably. If you want a gentle symmetrical curve, ease-in-out is the one you are reaching for.
Frequently Asked Questions
Why can I not drag the handles past the left and right edges?
Because the x axis is time, and a control point outside 0 to 1 would mean the animation reaching a moment before it started or after it ended. The specification clamps x for that reason. The y axis is unconstrained, which is what allows overshoot and anticipation.
Which easing should I use for an element appearing?
ease-out, or a custom curve weighted the same way — fast at the start, slowing into place. It reads as the element arriving and settling. An ease-in entrance starts slowly and feels like the interface is hesitating, even at 200 milliseconds.
How long should the duration be?
Roughly 150 to 250 milliseconds for small things like hovers and toggles, 250 to 400 for panels and modals. Past about 500 the animation stops being feedback and starts being something the user waits for. The curve shapes the feel; the duration decides whether it is in the way.
Is cubic-bezier the same as a spring animation?
No. A bezier curve is fixed in duration and shape, so it always takes exactly as long as you specify. A real spring is defined by stiffness and damping and settles when the physics says it does. You can imitate a single bounce with an overshooting bezier, but not the decay of successive ones.
