Understanding CSS Easing Functions
Easing functions control the pace of CSS animations, making transitions more natural. They map a time progress value (usually between 0 and 1) to an output that defines the animation’s intermediate state. While CSS has keywords like linear, ease, ease-in, and functions like cubic-bezier() and steps(), a new function named linear() (note the parentheses—distinct from the keyword linear) now enables more complex easing patterns without multiple keyframes.
Syntax of linear()
The linear() function accepts a list of output values (and optionally percentage stops). It creates a piecewise linear interpolation. Examples:
/* Equivalent to keyword linear */
linear(0, 1)
/* 0 → 0.9 in first half of duration, 0.9 → 1 in second half */
linear(0, 0.9, 1)
/* Explicit percentage stops: 20% to 60% of time maps output from 0.5 to 0.8 */
linear(0, 0.5 20%, 0.8 60%, 1)
The visual curves for these examples can be represented as linear segments connecting the given points.
Simulating Bounce Effects with linear()
Creating a bounce animation traditionally required multiple keyframes with cubic-bezier() timing, as in the popular bounceInDown effect from Animate.css:
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
With linear(), the same animation can be expressed with a single keyframe by defining a precise output path:
linear(
0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
);
This function describes a curve that mimics the bounce by specifying multiple intermediate outputs at calculated time percentages. For convenience, a generator tool is availible at linear-easing-generator.netlify.app.
Browser Support
As of this writing, linear() is supported in Chrome 113 and later. While not yet ready for production everywhere, broader adoption is expected within the next couple of years. For current projects, consider using fallback easing functions or a polyfill where needed.