Duration & asymmetric timing
Slower entrances, faster exits, and the exceptions to both
Duration by component type
| Component | Enter duration | Exit duration | Notes |
|---|---|---|---|
| Button press / micro-feedback | 50-100ms | 50-80ms | Must feel instant |
| Tooltip | 100-150ms | 75-100ms | Fast in, faster out |
| Popover / dropdown | 150-200ms | 100-150ms | Emerges from trigger |
| Toast / notification | 200-250ms | 150-200ms | Slides from edge |
| Modal / dialog | 200-350ms | 150-200ms | Scale + opacity |
| Drawer / sheet | 250-350ms | 200-250ms | Slides across significant distance |
| Page transition | 150-250ms | 100-150ms | Keep it tight |
Nothing exceeds 400ms.
Enter slow, exit fast
1.5:1 to 2:1. Enter at 250ms, exit at 150ms. A drawer enters at 300ms, exits at 180ms.
The 300ms budget
Total animation time for any single interaction: 300ms max.
5 items staggered at 50ms = 250ms total. An 800ms stagger looks like a broken loader.
Duration and distance
More distance needs more time, but not linearly. A drawer sliding 300px: ~300ms. A tooltip appearing 8px below its trigger: 100ms. A panel sliding 600px: ~350ms, not 600ms.
Double the distance, add 30-50% more duration.
When to skip duration entirely
Toggle states, checkbox fills, colour transitions on hover, focus-visible outlines.