Cubic-Bezier Easing Generator

What this tool is used for

• Building an easing curve that matches a motion spec rather than using a keyword.
• Comparing two curves against a live animation before choosing one.
• Producing an ease-out that decelerates more sharply than the built-in one.
• Getting the control points for a curve a designer drew.
• Checking how a curve feels at the duration you will actually use.

Frequently Asked Questions

What do the four numbers mean?

They are the two control points of a curve whose endpoints are fixed at (0,0) and (1,1): `cubic-bezier(x1, y1, x2, y2)`. The horizontal axis is elapsed time, the vertical is progress — so the curve is a speed profile, never a path the element travels along.

Why must x stay between 0 and 1 when y need not?

Because x is time, and time cannot run backwards — a control point outside 0–1 horizontally makes the function non-monotonic and CSS rejects it. y is progress, so values below 0 or above 1 are legal and give anticipation and overshoot, which is how a bounce is built.

What are the keywords equivalent to?

`linear` is (0, 0, 1, 1); `ease` is (0.25, 0.1, 0.25, 1); `ease-in` is (0.42, 0, 1, 1); `ease-out` is (0, 0, 0.58, 1); `ease-in-out` is (0.42, 0, 0.58, 1). `ease` is the default, and its slight asymmetry is why it feels less mechanical than `ease-in-out`.

Which easing should UI use?

Ease-out for anything entering or responding to a tap — it starts fast, so the interface feels immediate. Ease-in for things leaving. Ease-in-out for movement between two on-screen positions. Linear only for continuous motion such as a spinner.

Can a cubic-bezier do a real bounce?

Only a single overshoot, because one cubic segment can cross its target once. A multi-bounce needs `linear()` with stops, a keyframe animation, or a spring. If you find yourself hunting for magic numbers to get two bounces, the curve is the wrong tool.

Can a cubic-bezier curve overshoot?

Yes — Y control points outside 0 to 1 produce a value that passes its target and returns, which is how a bounce or anticipation effect is made. X must stay within 0 to 1, or the curve is not a function of time.

Common errors and gotchas

• Judging a curve at the wrong duration, where the same easing feels entirely different.
• Using control points outside 0-1 on the time axis, which is invalid.
• Choosing an overshoot curve for something that must not move past its target, such as a progress bar.
• Applying the same curve to entering and leaving, where asymmetry usually reads better.
• Ignoring reduced-motion preferences, which no easing curve addresses.