midCSS
CSS Transitions vs CSS Animations?
Updated Apr 28, 2026
Short answer
Transitions change property values smoothly over a given duration based on a state change (like hover). Animations use keyframes to run sequences independently.
Deep explanation
Transitions are implicit—they happen when a property changes value. Animations are explicit—they use @keyframes to define a series of steps and can loop indefinitely without user interaction.
Real-world example
Transition for a button hover effect; Animation for a loading spinner.
Common mistakes
- Using transitions for complex multi-step sequences, or animating non-performant properties like 'width'.
Follow-up questions
- Which properties are hardware-accelerated during animation?