Design · 5 min read
CSS Keyframe Animations: A Practical Guide
CSS transitions animate between two states when something changes. Keyframe animations go further: multi-step motion that can loop, run on page load, or play in reverse — all without JavaScript.
Try it yourself with the related tool.
Build a keyframe animation →Advertisement
Defining keyframes
An @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } block names an animation and lists its steps. Use percentages such as 0%, 50%, and 100% for more steps.
The animation property
animation: fade-up 400ms ease-out 100ms both sets the name, duration, timing function, delay, and fill mode. Other options include the iteration count (infinite), the direction (alternate plays back and forth), and the play state for pausing.
Fill mode is the one people forget: forwards keeps the last frame after the animation ends, backwards applies the first frame during the delay, and both does both — without it, elements snap back.
Keep it smooth
Animate transform and opacity whenever possible. The browser can run them on the GPU without recalculating layout. Animating width, top, or margin forces layout on every frame and stutters on slower devices.
Respect reduced motion
Some people get dizzy or nauseous from motion. Wrap large or looping animations in @media (prefers-reduced-motion: no-preference), or tone them down inside @media (prefers-reduced-motion: reduce). Fades are usually fine; parallax and big slides are not.