Spinning a logo continuously, making a notification badge pulse, or sliding a promotional banner into view the moment a page loads: these animations that start on their own, with no user needing to hover or click anything, come from a CSS animation built with the @keyframes rule.
Unlike a transition, which only animates the move between two states in response to interaction, a CSS animation choreographs a full sequence of steps, with the option to repeat it indefinitely, and needs no event at all to start playing.
Definition
A CSS animation rests on two pieces that always work together: the @keyframes rule, which defines the animation's steps as percentages between 0% and 100%, and the animation property, which applies that sequence to an element along with its duration, repeat count and easing curve.
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.notification {
animation: fade-in 0.4s ease-out;
}Intermediate steps, not just a start and an end
@keyframes really shows its value over a transition once an animation needs more than two steps. Any number of intermediate percentages can be added, each with its own values, to build a sequence far richer than a simple move from one state to another.
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.badge {
animation: pulse 1.5s ease-in-out infinite;
}The animation shorthand's settings
Once @keyframes is defined, the animation property controls how that sequence actually plays out, through five main settings that combine freely depending on the desired effect.
| Setting | Role |
|---|---|
animation-name | Name of the @keyframes rule to use |
animation-duration | Length of one full cycle |
animation-timing-function | Easing curve |
animation-iteration-count | Number of repeats, or infinite |
animation-direction | Playback direction, including alternating |
The alternate value of animation-direction can also play the same sequence forward then backward on each repeat, which avoids having to write a return step inside @keyframes for a simple back-and-forth effect.
transition or CSS animation: how to choose
A transition is enough for animating a one-off change triggered by an interaction, such as a hover. A CSS animation becomes necessary once a sequence needs several steps, an infinite loop, or an automatic start when the page loads, without waiting on any user action at all. Our HTML and CSS course walks through that choice between the two tools, with exercises to build both a transition and a looping animation.
forwards needs to be added explicitly, otherwise the element appears to jump backward once the animation ends.Picking the right curve and keeping the cost down
The easing curve gets chosen through an Easing and timing function, and on a looping, long, or widely visible animation running on many elements at once, will-change can help the browser prepare the rendering, as long as it is not overused.
Frequently asked questions
Yes, by separating animation names with a comma inside the animation property, each with its own duration and easing curve, exactly like combining several transitions on the same element.
Yes, through the animation-play-state property, set to either paused or running, often controlled from JavaScript to stop an animation on mouse hover or resume one that had been suspended when the page loaded.
0% and one at 100%?No, that is not required: a single intermediate step, at 50% for instance, is technically enough, since the browser automatically fills in the missing endpoints using the element's actual initial and final state, but stating both bounds explicitly remains a clearer and safer habit.