Motion & Animation Best Practices
Animation timing, easing, duration, micro-interactions, prefers-reduced-motion, CSS transitions vs keyframes, and View Transitions API based on Material Design 3, MDN, web.dev, and Nielsen Norman Group.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Only animate transform and opacity for GPU acceleration. Duration: 150-300ms for micro-interactions, up to 400ms for complex transitions. Use ease-out for entrances, ease-in for exits. Always respect prefers-reduced-motion. Use CSS transitions for state changes, keyframe animations for sequences.
Use When
- Adding hover and focus animations
- Creating loading indicators
- Building page transitions
- Implementing micro-interactions
- Animating component state changes
Skip When
- Static content with no interactivity
- Print stylesheets
Motion & Animation Best Practices
Animation timing, easing, duration, micro-interactions, prefers-reduced-motion, CSS transitions vs keyframes, and View Transitions API based on Material Design 3, MDN, web.dev, and Nielsen Norman Group.