linear() easing
The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.
Overview
The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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
Powered by web-features