Suggest an editImprove this articleRefine the answer for “How does animation differ from a transition?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Transition** is a smooth change between two states, triggered by an event (e.g. `hover`) and controlled by the `transition` property. **Animation** is a full-fledged animation with many intermediate keyframes, controlled by `@keyframes` + `animation`, and can start on its own without an event. **Key point:** transition is for a simple change between two states, animation is for complex, cyclic, multi-stage effects.Shown above the full answer for quick recall.Answer (EN)Image**The core difference:** | Transition | Animation | |---|---| | Works only **between two states** | Can have **many intermediate keyframes** | | Triggered **by an event** (e.g. hover, focus) | Can **start on its own**, without an event | | Controlled by the `transition` property | Controlled by `@keyframes` + `animation` | | Simple and short-lived | Complex, cyclic, multi-stage | --- ### **When to use transition** When you need to **smoothly change one state into another**, for example: - hover - focus - opening/closing - a change of color, size, opacity ```css .box { transition: opacity 0.3s; } .box:hover { opacity: 0.5; } ``` --- ### **When to use animation** When you need a **full-fledged animation**, for example: - infinite effects (blinking, spinning) - complex multi-stage motion - animation without user interaction - repeating cycles ```css @keyframes spin { to { transform: rotate(360deg); } } .box { animation: spin 2s linear infinite; } ``` --- ### **Summary in one sentence** **Transition** - for a simple, smooth change between two states. **Animation** - for complex, cyclic, multi-stage animation effects.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.