Animation Duration Guide
Duration Guidelines
| Category | Duration | Use Cases | Easing |
|---|---|---|---|
| Micro | 50โ150ms | Button hover, checkbox toggle, ripple effect, icon swap | ease-out |
| Standard | 150โ300ms | Tooltip appear, dropdown open, card flip, small slide | ease-in-out |
| Medium | 300โ500ms | Modal open, page transition, drawer slide, accordion | cubic-bezier(0.4,0,0.2,1) |
| Complex | 500msโ1s | Hero entrance, data visualization, onboarding step | cubic-bezier(0.25,0.1,0.25,1) |
| Decorative | 1s+ | Loading animations, ambient effects, attention animations | ease-in-out / linear |
Common Easing Functions (hover to preview)
ease-out
Fast start, slow end. Natural deceleration.
ease-in
Slow start, fast end. Good for exits.
ease-in-out
Smooth start and end. Balanced feel.
linear
Constant speed. Mechanical feel.
cubic-bezier(0.34,1.56,0.64,1)
Spring bounce. Overshoots and settles.
cubic-bezier(0.4,0,0.2,1)
Material Design standard. Smooth and crisp.
Rules of Thumb
- Shorter is usually better โ users don't want to wait for UI to respond
- Enter animations can be slightly slower than exit animations
- Respect
prefers-reduced-motionโ disable or shorten for accessibility - Larger elements benefit from slightly longer durations
- Avoid animating properties that trigger layout (use transform + opacity)
- Test at 1x, 2x, and 4x slow motion in DevTools