Master CSS keyframe animations with multi-step sequences, animation control properties like fill-mode, iteration-count, direction, and play-state, and learn to combine multiple animations on a single element.
The @keyframes rule defines the stages of a CSS animation. You give the animation a name and specify styles at various points (keyframes) during the animation timeline.
Simple two-step animation:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Multi-step animation using percentages:
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}You can define as many keyframes as you need. The browser automatically interpolates (tweens) between them.
To apply the animation, use the animation shorthand or individual properties:
.element {
animation: bounce 0.6s ease infinite;
}The shorthand order is: name duration timing-function delay iteration-count direction fill-mode play-state.
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
60% { transform: translateX(10%); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
.animated-box {
/* Name and duration (required) */
animation-name: slideIn;
animation-duration: 0.8s;
/* Timing function */
animation-timing-function: ease-out;
/* Delay before starting */
animation-delay: 0.2s;
/* How many times to repeat */
animation-iteration-count: 1; /* or: infinite, 3, etc. */
/* Direction of playback */
animation-direction: normal;
/* normal | reverse | alternate | alternate-reverse */
/* What styles apply before/after the animation */
animation-fill-mode: forwards;
/* none | forwards | backwards | both */
/* Pause or play */
animation-play-state: running; /* or: paused */
}animation-fill-mode controls what happens before and after the animation runs:
none — The element reverts to its original style when the animation ends.forwards — The element retains the styles from the last keyframe after the animation ends.backwards — The element takes on the styles from the first keyframe during the delay period (before the animation starts).both — Combines forwards and backwards.You can apply multiple animations to a single element by separating them with commas:
.element {
animation:
fadeIn 0.5s ease forwards,
slideUp 0.5s ease 0.2s forwards;
}Each animation can have its own duration, delay, and other properties. They run simultaneously (unless delays offset them).
Performance tip: Animate only transform and opacity when possible. These properties can be handled by the GPU compositor and do not trigger layout recalculations, resulting in smooth 60fps animations.
What does animation-fill-mode: forwards do?