Tools — 07
Motion is a sentence, and easing is its punctuation.
Linear movement reads as machinery. A curve tells the eye whether something arrived, was pushed, or simply appeared. Drag the two handles, or move them with the arrow keys, and watch the same duration change meaning.
The curve
Presets
Drag a handle, or focus it and use the arrow keys. Hold shift for larger steps.
Value
cubic-bezier(0.2, 0, 0, 1)
Preview
Copy-ready output
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
transition-duration: 900ms;Reference
A CSS cubic-bezier() easing function takes four numbers — the x and y coordinates of two control points between a fixed start (0,0) and end (1,1). x values must stay between 0 and 1; y values may go outside it, which is how overshoot and anticipation are produced.
What do the four cubic-bezier values mean?
They are two control points: x1, y1 for the first and x2, y2 for the second. The x axis is time from 0 to 1, the y axis is progress through the animated value.
The start and end points are fixed at (0,0) and (1,1) and cannot be changed. Only the two handles are yours, which is why every CSS easing curve is a cubic with exactly four parameters.
Why can y go above 1 but x cannot?
x is time, and time cannot run backwards — an x outside 0–1 would make the curve non-monotonic in time, so the specification forbids it.
y is progress, and progress may exceed its target and come back. A y above 1 overshoots the end value; a y below 0 pulls back before moving forward. That is the entire mechanism behind bounce and anticipation.
Which easing should UI motion use?
ease-out for anything entering or responding to a click, because it moves fastest at the start and the interface feels immediate. ease-in-out for elements moving between two on-screen positions.
Avoid ease-in alone for entrances: it starts slowly, which reads as lag. And keep durations short — a curve cannot rescue a 600ms transition on a button.
Does easing need to respect reduced motion?
Yes. Users who set prefers-reduced-motion do so because animation causes them discomfort, and no easing curve makes a large movement comfortable.
Wrap non-essential motion in a prefers-reduced-motion: no-preference query rather than only shortening the duration. This site does the same with both of its own motion patterns.
| Keyword | cubic-bezier equivalent | Character | Use for |
|---|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | No acceleration | Progress bars, loops |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | Browser default | Nothing in particular |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | Slow start | Elements leaving the screen |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | Fast start | Entrances, click responses |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Slow at both ends | On-screen position changes |
Common questions
- What is the difference between ease-in and ease-out?
- ease-in starts slowly and accelerates, which suits elements leaving the screen. ease-out starts fast and decelerates, which suits entrances and responses to input because the motion begins immediately.
- How do I make a bounce with cubic-bezier?
- Set the second control point's y value above 1, for example cubic-bezier(0.34, 1.56, 0.64, 1). The curve overshoots the final value and settles back. A true multi-bounce needs keyframes, since one cubic curve can only overshoot once.
- Can cubic-bezier x values be negative?
- No. The x coordinates of both control points must be in the range 0 to 1 because x represents time. A value outside that range makes the declaration invalid and the browser ignores it.