Skip to main content
UI/UX patterns recommended

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.

Tags

animation motion transitions micro-interactions accessibility performance

Discussion