linear() Easing GeneratorThe CSS linear() timing function (CSS Easing Functions Level 2, Chrome 113+ / Firefox 112+ / Safari 17.4+) lets you stitch together piecewise-linear segments to approximate spring physics, multi-step bounces, and elastic overshoots — things cubic-bezier() simply cannot do. Pick a preset, tune the physics, and copy a production-ready value.
linear(0, 1)
linear()
Before linear(), faking a spring or bounce in CSS meant constructing complex @keyframes with dozens of percentage stops, or driving the animation in JavaScript with a physics library. linear() moves the work into the browser's animation engine — you supply the same points, the browser interpolates linearly between them, and the result composites on the compositor thread.
Each stop can carry an optional position (linear(0, 0.5 25%, 1)), letting you bunch detail where motion changes fastest and avoid wasting points where the curve is straight. The browser also accepts unbounded values — overshoots past 1 are how you fake elastic / overshoot easings. This generator samples each preset's analytic equation and emits the minimum set of points needed to capture the shape, so you get smooth motion at a reasonable byte count.
Browser support: Chrome 113, Edge 113, Firefox 112, Safari 17.4. Fall back to ease-in-out for older browsers via @supports (animation-timing-function: linear(0, 1)).