CSS Easing Functions Module Level 2

Editor’s Draft,

More details about this document
This version:
https://drafts.csswg.org/css-easing/
Latest published version:
https://www.w3.org/TR/css-easing-2/
Implementation Report:
https://wpt.fyi/results/css/css-easing
Feedback:
CSSWG Issues Repository
Editors:
(Mozilla)
Tab Atkins Jr. (Google)
Chris Lilley (W3C)
Former Editors:
Matt Rakow (Microsoft)
(Google)
(Google)
(Apple Inc)
Suggest an Edit for this Spec:
GitHub Editor
Participate:
IRC: #css on W3C’s IRC
Tests:
web-platform-tests css/css-easing
Test Suite:
https://wpt.fyi/results/css/css-easing/

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

Abstract

This CSS module describes a way for authors to define a transformation that controls the rate of change of some value. Applied to animations, such transformations can be used to produce animations that mimic physical phenomena such as momentum or to cause the animation to move in discrete steps producing robot-like movement. Level 2 adds more sophisticated functions for custom easing curves.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

Please send feedback by filing issues in GitHub (preferred), including the spec code “css-easing” in the title, like this: “[css-easing] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org.

This document is governed by the 18 August 2025 W3C Process Document.

1. Introduction

This section is not normative.

It is often desirable to control the rate at which some value changes. For example, gradually increasing the speed at which an element moves can give the element a sense of weight as it appears to gather momentum. This can be used to produce intuitive user interface elements or convincing cartoon props that behave like their physical counterparts. Alternatively, it is sometimes desirable for animation to move forwards in distinct steps such as a segmented wheel that rotates such that the segments always appear in the same position.

Similarly, controlling the rate of change of gradient interpolation can be used to produce different visual effects such as suggesting a concave or convex surface, or producing a striped effect.

Easing functions provide a means to transform such values by taking an input progress value and producing a corresponding transformed output progress value.

Example of an easing function that produces an ease-in effect.
Example of an easing function that produces an ease-in effect.
Given an input progress of 0.7, the easing function scales the value to produce an output progress of 0.52.
Applying this easing function to an animation would cause it to progress more slowly at first but then gradually progress more quickly.

1.1. Value Definitions

This specification uses the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

2. Easing functions

An easing function takes an input progress value and produces an output progress value.

An easing function must be a pure function meaning that for a given set of inputs, it always produces the same output progress value.

The input progress value is a real number in the range [-∞, ∞]. Typically, the input progress value is in the range [0, 1] but this may not be the case when easing functions are chained together.

An example of when easing functions are chained together occurs in Web Animations [WEB-ANIMATIONS] where the output of the easing function specified on an animation effect may become the input to an easing function specified on one of the keyframes of a keyframe effect. In this scenario, the input to the easing function on the keyframe effect may be outside the range [0, 1].

The output progress value is a real number in the range [-∞, ∞].

Note: While CSS numbers have a theoretically infinite range (see CSS Values 4 § 5.1 Range Restrictions and Range Definition Notation) UAs will automatically clamp enormous numbers to a reasonable range. If easing functions are used outside of the CSS context, care must be taken to either correctly handle potential infinities (including those produced by merely very large values stored in a floating point number), or clamp the output progress value.

Some types of easing functions also take an additional boolean before flag, which indicates the easing has not yet started, or is going in reverse and is past the finish. (Some easing functions can have multiple possible output progress values for a given input progress value, and generally favor the last one specified; this flag instead causes those easing functions to favor the first specified value before the animation has started.)

This specification defines several types of easing functions:

<easing-function> = <linear-easing-function>
                  | <cubic-bezier-easing-function>
                  | <step-easing-function>
Tests

2.1. Linear Easing Functions: linear, linear()

A linear easing function is an easing function that interpolates linearly between its control points. Each control point is a pair of numbers, associating an input progress value to an output progress value.

A linear curve used as an easing function.
linear(0, .1 25%, .75 50%, 1)
The shape of the curve follows the control points.
Input progress values serve as x values of the curve, whilst the y values are the output progress values.

A linear easing function has the following syntax:

<linear-easing-function> = linear | <linear()>
linear() = linear( [ <number> && <percentage>{0,2} ]# )
Tests
linear

Equivalent to linear(0, 1)

linear()

Specifies a linear easing function.

Each comma-separated argument specifies one or two control points, with an input progress value equal to the specified <percentage> (converted to a <number> between 0 and 1), and an output progress value equal to the specified <number>. When the argument has two <percentage>s, it defines two control points in the specified order, one per <percentage>.

If an argument lacks a <percentage>, its input progress value is initially empty. This is corrected at used value time by linear() canonicalization.

To canonicalize a linear() function’s control points, perform the following:

  1. If the first control point lacks an input progress value, set its input progress value to 0.

  2. If the last control point lacks an input progress value, set its input progress value to 1.

  3. If any control point has an input progress value that is less than the input progress value of any preceding control point, set its input progress value to the largest input progress value of any preceding control point.

  4. If any control point still lacks an input progress value, then for each contiguous run of such control points, set their input progress values so that they are evenly spaced between the preceding and following control points with input progress values.

After canonicalization, every control point has an input progress value, and the input progress values are monotonically non-decreasing along the list.

Note: Serialization relies on whether or not an input progress value was originally supplied, so that information should be retained in the internal representation. It does not rely on whether a pair of control points were specified as two percentages on a single argument or as separate arguments.

Tests

2.1.1. Serializing

The linear keyword is serialized as itself.

To serialize a linear() function:

  1. Let s be the string "linear(".

  2. Serialize each control point of the function, concatenate the results using the separator ", ", and append the result to s.

  3. Append ")" to s, and return it.

To serialize a linear() control point:

  1. Let s be the serialization, as a <number>, of the control point’s output progress value.

  2. If the control point originally lacked an input progress value, return s.

  3. Otherwise, append " " (U+0020 SPACE) to s, then serialize the control point’s input progress value as a <percentage> and append it to s.

  4. Return s.

When serialized, control points originally specified with two input progress values are turned into two separate control points, and the input progress values are in strictly ascending order. For example:

2.1.2. Output

To calculate linear easing output progress for a given linear easing function func, an input progress value inputProgress, and an optional before flag (defaulting to false), perform the following. It returns an output progress value.

  1. Let points be func’s control points.

  2. If points holds only a single item, return the output progress value of that item.

  3. If inputProgress matches the input progress value of the first point in points, and the before flag is true, return the first point’s output progress value.

  4. If inputProgress matches the input progress value of at least one point in points, return the output progress value of the last such point.

  5. Otherwise, find two control points in points, A and B, which will be used for interpolation:

    1. If inputProgress is smaller than any input progress value in points, let A and