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
3 linear(0, 1.2 60%, 0.9, 1.05, 1);
4}
2anime({
3 targets: el,
4 translateY: -20,
5 easing: 'easeOutBounce'
6});
linear() Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.