Write a CSS transition and say nothing about timing, and you get ease. Halfway through the transition's duration, ease has already covered 80.2% of the distance. It passes the halfway position less than 30% of the way through the time. Most descriptions call it "slow at the start and slow at the end", and the first half of that is wrong: it starts at 40% of its average speed, not from rest.
This guide is in two halves. The first is the proof — what the four named easing keywords actually do, in numbers, and what one easing curve can and cannot express. The second is the workshop: what to reach for when the curve you want does not exist.
Four keywords are four pairs of numbers
Every named easing keyword except linear is shorthand for a cubic-bezier(). A cubic-bezier is a smooth curve fixed at two ends — no progress at the start, full progress at the end — and bent by two control points in between, each given as an x (time) and a y (progress). The four numbers you write are those two points. The CSS Easing specification defines the keywords exactly:
| Keyword | Equivalent to |
|---|---|
ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in | cubic-bezier(0.42, 0, 1, 1) |
ease-out | cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
linear is not one of them; it is its own keyword, and the specification tells browsers not to rewrite keywords as curves when they serialise them. And ease is the default not because the easing specification says so, but because the transitions and animations specifications do.
What ease and ease-in-out actually do
We evaluated each curve the way the specification defines it, over a million points. Here is how far along each one is at each tenth of the duration:
| Time | linear | ease | ease-in | ease-out | ease-in-out |
|---|---|---|---|---|---|
| 10% | 10.0% | 9.5% | 1.7% | 16.1% | 2.0% |
| 30% | 30.0% | 51.3% | 13.0% | 44.5% | 18.7% |
| 50% | 50.0% | 80.2% | 31.5% | 68.5% | 50.0% |
| 70% | 70.0% | 94.1% | 55.5% | 87.0% | 81.3% |
| 90% | 90.0% | 99.4% | 83.9% | 98.3% | 98.0% |
easeis front-loaded, heavily. At its furthest ahead it leads a straight line by 30% of the whole distance. Most of the movement is over in the first third.easedoes not start from rest. Its speed at the very beginning is 0.4 times its average speed.ease-inandease-in-outstart at zero. If you want an element to begin moving gently,easeis not the keyword that does it.easeandease-in-outare not close relatives.ease-in-outis exactly symmetrical — its second half mirrors its first.easeis not symmetrical at all. At their furthest apart, the two differ by 35% of the travel: on a 300-pixel movement, about 106 pixels at the same instant.
Neither is "smoother" or "more natural" in any sense we could find evidence for. They are different shapes. Which one looks right is a judgement about your interface, not a property of the curve.
What one curve cannot do
The x coordinates of the two control points must sit between 0 and 1. The y coordinates are allowed anywhere, which is why a curve like cubic-bezier(0.3, 1.5, 0.7, 1) is legal: it overshoots past the end and settles back. Overshooting is part of the specification, not a hack. The x values are restricted for a stated reason — outside that range the curve can loop back on itself, and a timing function has to give exactly one progress value for each moment.
What a single cubic-bezier cannot do is bounce more than a little. The curve's slope is governed by a quadratic, so it can change direction at most twice — which means at most three stretches of going one way. We checked that exhaustively, solving it exactly for 1,442,401 combinations of the two y values, and none produced a third turning point.
A real bounce — a ball dropping and rebounding smaller each time — changes direction six times. The closest a single cubic-bezier gets to the common "bounce out" easing is off by about a fifth of the whole travel at its worst point. So if you have been nudging four numbers trying to get a bounce, stop: it is not in there.
The workshop: what to use instead
Keyframes. The traditional answer is to cut the motion into pieces, each with its own gentle curve. A standard bounce fits well in seven keyframe segments, each accurate to within 1.6% of the target shape.
linear(). The newer answer is the linear() easing function from the Level 2 easing specification, which lets you list the points of a curve directly and joins them with straight lines. With 16 points it reproduces the same bounce to within about 1.6% — much the same accuracy as seven keyframes, in one line of CSS. It reached "Baseline widely available" on 11 June 2026. That label is a convention: it means the feature has been in every major browser for thirty months, not that every device in use today has it. Safari supports it from version 17.2.
Check the property animates at all. Easing only shapes a property that can be interpolated — smoothly blended between two values. Some properties can't be blended and will simply switch from the start value to the end value halfway through the duration, ignoring any easing curve. Even a property that normally animates can refuse for a particular pair of values; the specification's own example is a box-shadow going from an ordinary shadow to an inset one. If "nothing is animating", this is usually why, and no amount of easing will fix it. You also cannot transition the easing itself: transition-timing-function is not animatable.
The keyword definitions and the rules on control points are quoted from CSS Easing Functions Level 1 and the linear() function in Level 2, and the Baseline date from the web platform status service, all read on 25 September 2026. We computed the progress table, the turning-point proof and the bounce comparisons from the specification's own definition of the curve.
Our cubic-bezier editor draws any curve you describe and gives you the CSS for it. An honest note about it: its animation preview did not move at all until this week — a sizing rule made it slide by zero pixels, which we have fixed — and it still has no keyboard controls, so for now it is a tool for pointer users. The curve it draws is accurate: checked against an independent implementation, it stayed within 1.7% of the correct shape across all twelve of its presets.
View author profile → · Editorial policy
