Motion
Duration
motionanimationtimingperformance
The total time an animation takes from start to finish.
When to use
- UI micro-interactions: 100–200ms (fast, responsive feel)
- Entrance/exit transitions: 200–350ms
- Page-level transitions: 300–500ms
- Never exceed 500ms for interactive feedback — feels sluggish
Examples
- Button hover state: 150ms
- Modal entrance: 250ms
See this in the wild
Analyze a site and look for duration in the breakdown.
