CSS Easing Functions

Basic

An easing function maps progress

An easing function is a pure mapping from an input progress value to an output progress value. CSS transitions and animations use that mapping to control how progress is distributed over time; the easing function does not choose the before-change or after-change value itself. The CSS Easing Functions specification is the shared owner for this model.

?

The `linear` keyword

The `linear` keyword is the identity easing function: the output progress equals the input progress. It is the simplest timing function and is useful when progress should advance at a constant rate.

Cubic Bézier easing

The standard `ease`, `ease-in`, `ease-out`, and `ease-in-out` values are cubic Bézier easing functions. `cubic-bezier(x1, y1, x2, y2)` defines two control points; each x coordinate must be in the range 0 to 1. The y coordinates are not restricted to that range, which permits overshooting output progress.

?

Step easing changes progress in jumps

A step easing function divides input progress into a number of equal intervals and produces discrete jumps. `step-start` is equivalent to `steps(1, start)` and `step-end` to `steps(1, end)`. `steps()` also accepts a step position such as `jump-start`, `jump-end`, `jump-none`, or `jump-both`; when omitted, the step position is `end`.

?

The step position changes the boundaries

The `jump-start` position makes the first jump occur at input progress 0; `jump-end` places the last jump at 1; `jump-none` keeps jumps within (0, 1); and `jump-both` places jumps at both ends. The `start` and `end` aliases behave like `jump-start` and `jump-end` respectively.

Easing is shared; transition and animation behavior is not

Transitions and Animations consume easing values but retain ownership of their own timing and lifecycle models. This lesson defines the easing function itself. The Transitions lesson explains when transition progress runs; the Animations lesson explains where an animation timing function applies between keyframes. Keeping those responsibilities separate prevents the same timing-function reference material from being repeated.

Level 2: the `linear()` function

CSS Easing Functions Level 2 is a W3C Editor’s Draft. It extends the linear easing family with the `linear()` function, which lets authors specify multiple control points and percentages so a single easing function can approximate more complex piecewise-linear curves. Treat this as developing specification material even when a browser implements it.

?

Specification status and ownership

CSS Easing Functions Level 1 is listed by W3C CSS Current Work as a Candidate Recommendation Draft and defines the shared `linear`, cubic Bézier, and step easing functions. CSS Easing Functions Level 2 is an Editor’s Draft and adds `linear()`. This lesson teaches Level 1 as the established core and labels Level 2 as developing.

Quick recap

Choose the easing model by the shape of progress you need: `linear` for constant progress, cubic Bézier values for smooth curves, and `steps()` for deliberate jumps. When reading a transition or animation, separate the easing function from the owner that decides when and where that progress is applied.