Syntax
@keyframes name { 0% { } 100% { } }
animation: name duration timing-function iteration-count;Examples
A Basic Keyframe Animation
Defining and applying a fade-in-and-rise animation.
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeInUp 0.5s ease-out;
}Multi-Step and Looping Animation
A pulsing loading indicator using percentage-based keyframes.
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.1); }
}
.loading-dot {
animation: pulse 1.5s ease-in-out infinite;
}Parameters and values
- animation-name (identifier): References a @keyframes rule by name
- animation-duration (time): Length of one animation cycle
- animation-iteration-count (number | infinite): How many times the animation repeats
- animation-fill-mode (none | forwards | backwards | both): What styles apply before/after the animation runs
Best practices
- Use @keyframes for multi-step or looping animations, and simple transitions for animating between exactly two states
- Set animation-fill-mode: forwards when the animation's end state should persist after it finishes, rather than snapping back to the original style
- Use infinite only for genuinely continuous effects like loading spinners - most UI animations should run once
- Wrap non-essential animations in an @media (prefers-reduced-motion: no-preference) query so users with motion sensitivity are not affected
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Transitions
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Transforms
transform lets you visually move, rotate, scale, or skew an element without affecting the document flow of surrounding elements - unlike changing position/width directly. Multiple transform functions can be combined in a single declaration, and transform-origin controls the pivot point for rotation and scaling.Filters
The filter property applies graphical effects like blur, brightness, contrast, and grayscale directly to an element, similar to Photoshop-style filters. backdrop-filter applies the same effects to the area behind an element instead, commonly used for frosted-glass UI effects. Multiple filter functions can be chained together.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Transforms
transform lets you visually move, rotate, scale, or skew an element without affecting the document flow of surrounding elements - unlike changing position/width directly. Multiple transform functions can be combined in a single declaration, and transform-origin controls the pivot point for rotation and scaling.Filters
The filter property applies graphical effects like blur, brightness, contrast, and grayscale directly to an element, similar to Photoshop-style filters. backdrop-filter applies the same effects to the area behind an element instead, commonly used for frosted-glass UI effects. Multiple filter functions can be chained together.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.