CSS linear Easing — Constant Speed Transitions
Understand the CSS linear timing function that moves at a constant speed from start to finish. Learn when constant-rate animation is the right choice.
Detailed Explanation
The linear Timing Function
The linear keyword maps to cubic-bezier(0, 0, 1, 1) — a straight diagonal line from (0, 0) to (1, 1). The animation progresses at a constant rate with no acceleration or deceleration.
The Curve
transition-timing-function: linear;
/* equivalent to: */
transition-timing-function: cubic-bezier(0, 0, 1, 1);
Because there is no change in speed, linear feels mechanical. In most UI contexts this makes animations feel unnatural, which is why it is rarely the best default.
When linear Works Well
- Progress bars: A loading indicator should advance at a constant rate to accurately communicate progress.
- Infinite rotations: Spinners and loading icons that rotate continuously should not speed up or slow down.
- Color cycling: Gradually shifting through a color palette benefits from even timing.
- Scrolling marquees: Text or image carousels that scroll continuously.
Code Example
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Why linear Feels Different
Human perception expects objects to ease into and out of motion. A ball rolling across a table slows down due to friction; a car doesn't instantly reach full speed. Using linear for UI element movements (slide-ins, fades) typically feels stiff compared to ease or ease-in-out.
Use Case
Use linear for animations that represent continuous, mechanical processes — loading spinners, progress bars, scrolling tickers, or any situation where a constant speed accurately represents the underlying process.