The animation-timing-function CSS property sets the speed curve of an animation. It dictates how an animation progresses over time, allowing it to accelerate, decelerate, or maintain a constant speed. This control over the animation's pace is crucial for creating smooth, natural, and engaging user experiences.
Example 1: ease
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* ease: The animation starts slow, accelerates, then slows down at the end. */
animation-timing-function: ease;
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
The ease value is the default. It creates a realistic-looking motion by starting the animation slowly, speeding it up in the middle, and then slowing it down again before it concludes.
Example 2: linear
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* linear: The animation maintains a constant speed from start to finish. */
animation-timing-function: linear;
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
With the linear timing function, the animation progresses at a single, consistent speed throughout its entire duration. This is ideal for effects like continuous rotations or background scrolling.
Example 3: ease-in
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* ease-in: The animation begins slowly and gradually accelerates until it ends. */
animation-timing-function: ease-in;
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
The ease-in value causes the animation to have a slow start, gradually picking up speed until the end. This effect can be used to simulate an object accelerating into motion.
Example 4: ease-out
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* ease-out: The animation starts at full speed and then decelerates to a stop. */
animation-timing-function: ease-out;
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
Contrary to ease-in, the ease-out timing function makes the animation begin quickly and then gradually slow down as it approaches its final state. This is effective for elements that are arriving or coming to a rest.
Example 5: ease-in-out
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* ease-in-out: The animation starts slowly, accelerates, and then slows down at the end. */
animation-timing-function: ease-in-out;
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
The ease-in-out value provides a slow start and a slow end, similar to ease, but with a more symmetrical acceleration and deceleration curve. It is often perceived as a smoother and more gentle effect.
Example 6: cubic-bezier()
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* cubic-bezier(): Defines a custom timing curve with four control points. */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
The cubic-bezier() function offers complete control over the animation's speed by allowing you to define your own timing curve. The four values specify the P1 and P2 points of the curve, enabling a wide range of custom acceleration profiles.
Example 7: steps()
/* This is a basic animation setup */
.box {
width: 100px;
height: 100px;
background-color: #e67e22;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
/* steps(): Divides the animation into a specified number of discrete steps. */
animation-timing-function: steps(5, end);
}
@keyframes move {
from {left: 0px;}
to {left: 300px;}
}
Explanation
The steps() function creates a stepped, or jerky, animation by breaking it into a defined number of intervals. This is perfect for creating sprite sheet animations or effects that should not be smooth.