Keyframe Animations
Create multi-step animations with @keyframes.
Syntax
@keyframes name { from {} to {} } animation: name 2s infinite;The @keyframes rule defines the steps of an animation, and the animation property applies it to an element.
You specify frames using from/to or percentages, then set duration, timing, iteration count, and more.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses @keyframes to animate a skeleton loading placeholder by pulsing its opacity, indicating content is being fetched.
- A designer creates a spinning loading spinner with @keyframes rotate { to { transform: rotate(360deg); } } applied infinitely.
- A developer uses @keyframes to slide a toast notification in from the right edge and fade it out after a delay, all in CSS.
More examples
Spinning loader with @keyframes
Defines a spin animation that rotates the element 360 degrees and applies it infinitely as a loading spinner.
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 36px;
height: 36px;
border: 4px solid #eee;
border-top-color: #2965f1;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}Skeleton pulse with keyframes
Pulses opacity between full and 40% to create a breathing skeleton placeholder during data loading.
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.skeleton {
background: #e0e0e0;
border-radius: 4px;
animation: pulse 1.5s ease-in-out infinite;
}Slide-in toast notification
Slides a toast notification in from off-screen right and fades it in using a one-shot @keyframes animation.
@keyframes slide-in {
from { transform: translateX(110%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #1a1a2e;
color: #fff;
padding: 12px 20px;
border-radius: 8px;
animation: slide-in 0.35s ease forwards;
}
Discussion