Keyframes: Multi-Step Motion
Learn when transitions are not enough and how @keyframes gives you full control over multiple animation stages.
Step 1 of 5
When transitions stop being enough
Transitions are perfect when you have two states: before and after. But sometimes motion has more than two stages. A loader might pulse over and over. A badge might rise, rotate, and settle. A notification might fade in, overshoot, then snap into place.
That is where @keyframes comes in. Keyframes let you define multiple checkpoints across time — like 0%, 50%, and 100% — and the browser animates between all of them.
Learn more on MDN