Newly available Helpful when linear() easing improves stylesheet organization, fallback behavior, or cascade control.

linear() easing

The linear() CSS function creates a transition curve that progresses uniformly between points. As an <easing-function>, it creates transitions where the interpolation occurs at a constant rate from beginning to end.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.easing-function.linear-function
113
113
112
17.2
113
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.bounce {
  animation: drop 1s linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191,
    0.25, 0.316, 0.391, 0.473, 0.563, 0.66, 0.766, 0.879,
    1, 0.879, 0.766, 0.66, 0.563, 0.473, 0.391, 0.316,
    0.25, 0.316, 0.391, 0.473, 0.563, 0.66, 0.766, 0.879, 1
  );
}

Live demo

Bounceanimation

linear() easing function Bounceanimation demo.

PreviewFullscreen

springeffect

linear() easing function springeffect demo.

PreviewFullscreen

step style(linearcomparison)

linear() easing function step style(linearcomparison) demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use linear() easing to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links