Custom CSS Easing with linear() Timing Function
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.
// JS animation library for bounce/spring easinganime({ targets: el, translateX: 300, easing: 'spring(1, 80, 10, 0)'});.el { transition: transform 0.6s linear(0, 1.2 60%, 0.9, 1.05, 1);}linear easing Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
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, so 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.