Custom easing curves without cubic-bezier guessing
Creating non-standard easing like bounce or spring required either a cubic-bezier approximation (which can only produce curves, not bounces) or a JavaScript animation library. linear() defines an easing function by interpolating between a list of keyframe values.
2 transition: transform 0.6s linear(0, 1.2 60%, 0.9, 1.05, 1);
3}
2anime({
3 targets: el,
4 translateY: -20,
5 easing: 'easeOutBounce'
6});
Browser Support for linear()
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Bounce and spring without a library
cubic-bezier() can only produce S-curves. linear() can overshoot and come back, producing bounces, springs, and elastic effects in pure CSS.
Works with transition and animation
linear() is a standard easing value. Use it anywhere you use ease, ease-in-out, or cubic-bezier — in transitions, animations, and animation-timing-function.
Optional position hints
Each stop can include an optional percentage hint. linear(0, 1.2 60%, 1) puts the overshoot at 60% of the duration rather than evenly spaced.
How it works
cubic-bezier() defines an easing curve with two control points. Because it is a cubic function, it cannot cross itself — it can only produce smooth S-curves. Achieving a bounce required either a JavaScript animation library or manually chaining multiple animations, which was complex and hard to maintain.
linear() defines an easing function by linearly interpolating between a list of output values. Values above 1 or below 0 overshoot, which creates bounce and spring effects. Optional percentage hints like 1.2 60% place a keyframe at a specific point in the duration. A useful tool for generating linear() curves is linear-easing-generator.netlify.app.