Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
The linear() function let us define stops in animations and transitions, which will progress sequentially along a straight line. It’s similar to the linear timing value, but allows more control.
.bar-1 {
animation-timing-function: linear(0, 0.25, 1);
}
.bar-2 {
animation-timing-function: linear(0, 0.75, 1);
}
.bar-3 {
animation-timing-function: linear(0, 0.25, 0.75, 1);
}The linear() function is defined in the CSS Easing Functions Level 2 specification, and it’s one of the three CSS easing functions.
Syntax
The CSS linear() function only works with two CSS properties: animation-timing-function and transition-timing-function.
linear() = linear( [ <number> && <percentage>{0,2} ]# )Arguments
/* Multiple stops */
linear(0, 0.33, 1);
linear(0, 0.75, 1);
linear(0, 0.1, 0.5, 0.8, 1);
/* Using stop lengths */
linear(0, 0.5 75%, 1);
linear(0, 0.25 25% 75%, 1);
/* These are the same as linear */
linear(0, 1);
linear(0, 0.5, 1);The linear() function takes a comma-separated list of stops for the animation or transition. Each stop has a decimal (between 0 and 1) to define the animation’s progress at a given point, and two optional percentages to define its starting and ending points. Then, linear() will interpolate the values in between, you guessed it, linearly.
For example, in linear(0, 0.75, 1), each decimal sets a progress stop. By default, each stop is separated equally, so the animation will take the same time to go from 0 to 0.75 as it goes from 0.75 to 1. This means the animation will reach the 0.75 stop halfway through the animation.
However, we can change this by adding a percentage after a progress stop, which will mark the start of the stop. For example, linear(0, 0.75 25%, 1) has the same progress stops as the last snippet, but now the animation will reach 0.75 after only 25% of the animation has passed, then move from 0.75 to 0.1 during the rest of the animation.
Lastly, we can also add an ending point to a progress stop as another percentage. For example, linear(0, 0.75 25% 50%, 1) makes the animation reach 0.75 after 25% of the animation has passed, wait there until it reaches 50%, and then keep going.
Finally, it is crucial to note that stops must be arranged in increasing order. For instance, if any stop value is less than its preceding stop, the animation or transition won’t work.
Basic usage
A “bounce” animation is one of the most popular uses of the linear() function. By setting the input progress value arguments to increasing numbers, with a single output progress value for each stop, you can simulate a real-life bouncing ball.
:root {
--bounce: linear(
/* Start to 1st bounce */ 0,
0.063,
0.25,
0.563,
1 36.4%,
/* 1st to 2nd bounce */ 0.812,
0.75,
0.813,
1 72.7%,
/* 2nd to 3rd bounce */ 0.953,
0.938,
0.953,
1 90.9%,
/* 3rd bounce to end */ 0.984,
1 100% 100%
);
}
.circle {
animation: bounce 2s var(--bounce);
}
@keyframes bounce {
to {
transform: translateY(200px);
}
}Example: Twinkling stars in a night sky with linear()
Another simple animation with the linear() function displays a night sky with dispersed stars twinkling at different intervals.
@keyframes scaleIn {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.star {
animation: scaleIn 3s infinite;
animation-timing-function: linear(0, 0.2 20%, 0.8 80%, 1 100%);
animation-direction: alternate;
}The stars transform from a scale of 0.5 to 1 and an opacity of 0 to 1, giving a twinkling star effect.
Example: Walking animation with the linear() function
What better way to integrate physics into CSS than by demonstrating linear motion? If you’re a physics nerd, you’re probably familiar with rectilinear motion. If you’re not, the gist is this: the linear/rectilinear motion describes an object moving in a straight line. It’s divided into uniform and non-uniform.
For the uniform, we can have a person walking at a constant speed from start to finish:
.person {
animation: walk 8s linear(0, 1 100%) infinite;
}And for the non-uniform, we can have a car accelerating from 0 to 100 at different speed intervals:
.car {
animation: drive 4s linear(0, 0.05, 0.15 25%, 0.2, 0.25, 0.46, 0.54 50%, 0.6, 0.72, 0.86 75%, 1) infinite;
}The car starts from 0 and increases its speed with intermittent deceleration along each output progress value stops before picking up again at a greater speed.
Specification
The linear() function is defined in the CSS Easing Functions Level 2, which is currently in Editor’s Draft
Browser support
The CSS linear() function has gained widespread support across all browsers since 2023. However, it’s crucial to wrap your animations with the CSS media prefers-reduced-motion: no-preference for users who might not like unnecessary motions on a website for one reason or another.
@media (prefers-reduced-motion: no-preference) {
/* your animation */
}
