Understanding transition timing functions

I’ve been trying to write animations over the past few days, and one thing has been pretty confusing: the four numbers inside cubic-bezier().

I know changing the numbers changed the feel of a transition. But I couldn’t really explain what a value such as cubic-bezier(0.25, 0.1, 0.25, 1) actually meant.

Turns out that they are the coordinates of two control handles on a graph.

What does a timing function do?

A transition’s duration answers how long the change or animation takes. Its timing function answers how the change is distributed across that time.

.button {
  transition: transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

The browser repeatedly asks one question during those 800 milliseconds: “Given how much time has passed, how much of the property change should be complete?”

A timing function maps an input progress to an output progress. On the graph, input is time on the horizontal axis and output is completed progress on the vertical axis.

Both axes use normalized values. 0 means none and 1 means all. So x = 0.5 means half of the duration has elapsed, while y = 0.75 means the animated property has completed 75% of its journey. The x-values stay between 0 and 1 because they represent time, but y-values can go below 0 or above 1 to create effects like anticipation or overshoot. We’ll come back to that later.

Basically: at time x, use the curve to look up progress y.

The four values position two handles

The function is easier to read when you group the four values into two coordinate pairs. A cubic Bézier curve has four defining points, but CSS only lets you position the middle two:

• P0 = (0, 0) is the fixed start.
• P1 = (x1, y1) is the first movable handle.
• P2 = (x2, y2) is the second movable handle.
• P3 = (1, 1) is the fixed end.

The four numbers are not points the curve must pass through. They position two handles that pull the curve into a shape, and that shape determines how the animation leaves the start, moves through the middle, and arrives at the end. These handles are often called control points. So P1 = (x1, y1) does not mean “at time x1, progress is y1.”

This is why x2 may be smaller than x1. The handles can cross horizontally because they are not ordered timestamps. CSS only requires each x-coordinate to stay between 0 and 1.

The familiar linear timing function is the simplest baseline: cubic-bezier(0, 0, 1, 1). In that representation, P1 overlaps P0, P2 overlaps P3, and all four points lie on the same diagonal. Progress therefore always equals elapsed time.

At each moment, the browser takes elapsed time as x, finds that x on the curve, and reads the curve’s y as progress. The progress comes from the curve not from either handle.

The slope is the speed

Now we can get from the shape of a curve to the feel of an animation. The slope tells us how quickly progress is changing as time passes:

• A flat part of the curve makes little progress while time continues, so the motion is slow.
• A steep part makes a lot of progress in a short time, so the motion is fast.
• A straight diagonal has a constant slope, so it produces linear motion.

The dashed line from the start to P1 is tangent to the beginning of the curve, so the first handle directly controls the starting velocity. The line from P2 to the end does the same for the ending velocity.

You can think of the starting slope as the handle’s vertical position divided by its horizontal position: how far it pulls upward or downward compared with how far it pulls forward in time. At the end, the same idea applies between the second handle and the fixed endpoint.

You do not need to calculate these slopes to choose an easing; they simply explain why moving a handle changes the way motion departs or arrives.

The familiar keywords are curves too

CSS’s named timing functions are aliases for particular cubic Bézier curves:

Why x is restricted but y is not

CSS requires x1 and x2 to be between 0 and 1. That keeps the curve valid as a timing function: each moment in time can map to one progress value. If either x value falls outside that range, the whole cubic-bezier() value is invalid.

The y values have no such restriction. A negative y value can make the property move backwards before it moves forward. A y value above 1 can carry the property beyond its destination and then bring it back. That is how a cubic Bézier curve can create anticipation or overshoot without a spring.

How the curve controls motion

Below is a visualizer of the same time-to-progress mapping. Drag either blue handles or adjust the four values, then press Play.

Watch the graph and the track together. Time advances evenly from left to right. At each moment, the dot’s vertical position shows the progress returned by the curve, and the ball underneath uses that same progress to move from start to finish.

The curve is not a path the ball follows through space it is the rule that controls how far the ball has travelled at each moment.

An easy mental model to keep

1. x is elapsed time.
2. y is completed progress.
3. The start (0, 0) and end (1, 1) are fixed.
4. The first pair positions the handle that shapes the departure.
5. The second pair positions the handle that shapes the arrival.
6. Flat means slow; steep means fast.
7. The handles pull the curve. They are not points it must visit.

So when seeing cubic-bezier(x1, y1, x2, y2), picture two handles on a time–progress graph and ask: how should this motion leave, where should it accelerate, and how should it arrive?

References

1. CSS Easing Functions Level 2 — W3C specification, “Cubic Bézier easing functions.”
2. cubic-bezier() — MDN Web Docs reference.