Motion & Animation
Material Design 3 motion system with duration tokens and easing curves. Motion helps guide focus, express hierarchy, and reinforce spatial relationships.
Overview
The Material Design 3 motion system uses carefully crafted duration and easing values to create smooth, natural animations. Motion helps guide focus, express hierarchy, and reinforce spatial relationships.
Duration Tokens
Short (50-200ms)
For icon state changes, checkboxes, simple toggles
Medium (250-400ms)
For dropdowns, tooltips, simple dialogs
Easing Curves
Standard
Decelerate
Accelerate
Animation Utilities
Fade Animations
Slide Animations
Scale Animations
Motion Tokens Reference
Duration Tokens
| Token | Value | Use Case |
|---|---|---|
--md-sys-motion-duration-short1
|
50ms | Icon state changes, quick toggles |
--md-sys-motion-duration-short2
|
100ms | Checkboxes, switches |
--md-sys-motion-duration-medium1
|
250ms | Dropdowns, small dialogs |
--md-sys-motion-duration-medium2
|
300ms | Tooltips, snackbars |
Easing Tokens
| Token | Curve | Use Case |
|---|---|---|
--md-sys-motion-easing-standard
|
cubic-bezier(0.2, 0, 0, 1) | Default transitions |
--md-sys-motion-easing-emphasized-decelerate
|
cubic-bezier(0.05, 0.7, 0.1, 1) | Elements entering |
--md-sys-motion-easing-emphasized-accelerate
|
cubic-bezier(0.3, 0, 0.8, 0.15) | Elements exiting |