A transition only animates between two states — from A to B. A CSS animation, built with @keyframes, can move through several steps, repeat, and run automatically without needing a hover or click to trigger it.
@keyframes names a sequence of steps, from 0% (start) to 100% (end).
@keyframes slide-in {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}.card {
animation-name: slide-in;
animation-duration: 0.5s;
}| Property | Controls |
|---|---|
| animation-name | Which @keyframes rule to run |
| animation-duration | How long one cycle takes |
| animation-timing-function | The speed curve, same values as transitions |
| animation-delay | How long to wait before starting |
| animation-iteration-count | How many times it repeats — a number, or "infinite" |
| animation-direction | normal, reverse, alternate (back and forth) |
| animation-fill-mode | Whether the element keeps the first/last keyframe's styles before/after running |
.spinner {
animation: spin 1s linear infinite;
/* name, duration, timing-function, iteration-count */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Any percentage between 0% and 100% can define a step.
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.badge {
animation: pulse 2s ease-in-out infinite;
}Practice it interactively
This site's Animation tool (under Tools) provides a visual keyframe/easing editor and outputs the exact CSS shown here — a faster way to preview timing curves than guessing values.