Motion
Motion has a job.
Section titled “Motion has a job.”Recommended transition duration: 120–220ms.
| Token | Duration | Use |
|---|---|---|
| fast | 120ms |
direct state feedback |
| normal | 180ms |
menus, tabs, small disclosures |
| slow | 220ms |
drawers and larger spatial changes |
Good uses
Section titled “Good uses”- tab content changes
- disclosure expansion
- dialog and dropdown transitions
- selected-state changes
- toast entrance and exit
- decorative parallax
- continuous floating animation
- large page transition effects
- animation that delays input
- animation attached to every hover state
Reduced motion
Section titled “Reduced motion”All non-essential animation should respect prefers-reduced-motion. Components must remain understandable when transitions are reduced or removed.
Reduced motion should preserve the final state immediately. Do not remove feedback, focus movement, or required announcements along with animation.