What do the four numbers mean?

They are the x and y coordinates of two control points, P1 and P2. The curve always runs from (0,0) to (1,1): x is the fraction of the duration elapsed, y is the fraction of the change applied.

Can the values go above 1 or below 0?

The y values can, and that is what produces overshoot — the animation passes its target and settles back. The x values cannot: CSS rejects them, because an x outside 0–1 would mean time running backwards.

Which easing should I use?

Ease-out for things entering the screen, so they arrive quickly and settle gently. Ease-in for things leaving. Ease-in-out for movement between two on-screen positions. Linear only for continuous motion like a spinner.

Cubic Bezier Editor

Shape the timing function that decides how an animation accelerates. Drag either control point, or set the four numbers precisely with the sliders, and watch the motion replay as you go. The named CSS easings are included as presets, so you can start from ease-in-out and adjust rather than guess at numbers.

Design Tools

P1 x0.25

P1 y0.1

P2 x0.25

P2 y1

Motion preview — 1.2 seconds

transition-timing-function: ease;

The x values are locked to 0–1 because CSS rejects anything else: time cannot run backwards. The y values are deliberately free, since taking them past 1 or below 0 is exactly what makes a curve overshoot and settle back — the bounce in "back-out".

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

What the curve controls

cubic-bezier(x1, y1, x2, y2) — from (0,0) to (1,1)

The horizontal axis is time and the vertical axis is progress. A curve that rises steeply at the start moves most of the distance early and coasts to a stop; one that stays flat then rises does the opposite. The straight diagonal is linear motion.

The named keywords are exact aliases: ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), and ease-in-out is (0.42, 0, 0.58, 1).
Linear is cubic-bezier(0, 0, 1, 1), which is why it looks mechanical: the speed never changes.
A y value above 1 overshoots past the target; below 0 it backs up before starting. Both read as physical weight when used sparingly.
Easing shapes the motion but not its length. Duration is a separate property, and a slow curve cannot rescue an animation that runs too long.

For reference

The built-in easings as numbers

Keyword	cubic-bezier	Feels like
linear	0, 0, 1, 1	Constant speed, mechanical
ease	0.25, 0.1, 0.25, 1	The CSS default
ease-in	0.42, 0, 1, 1	Slow start, fast finish
ease-out	0, 0, 0.58, 1	Fast start, gentle landing
ease-in-out	0.42, 0, 0.58, 1	Slow at both ends
back-out	0.34, 1.56, 0.64, 1	Overshoots, then settles

Anything with a y above 1, like back-out, has no keyword — overshoot is only reachable through cubic-bezier().

How to use

4 clear steps.

Pick a preset close to the motion you want, or start from ease.
Drag either control point on the curve, or use the sliders for exact values.
Watch the preview to judge the motion rather than the shape.
Copy the timing function into your CSS.

Good to know

Frequently asked questions

What do the four numbers mean?: They are the x and y coordinates of two control points, P1 and P2. The curve always runs from (0,0) to (1,1): x is the fraction of the duration elapsed, y is the fraction of the change applied.
Can the values go above 1 or below 0?: The y values can, and that is what produces overshoot — the animation passes its target and settles back. The x values cannot: CSS rejects them, because an x outside 0–1 would mean time running backwards.
Which easing should I use?: Ease-out for things entering the screen, so they arrive quickly and settle gently. Ease-in for things leaving. Ease-in-out for movement between two on-screen positions. Linear only for continuous motion like a spinner.