Motion
Durations and easing curves.
Durations
| Token | Value | Use for |
|---|---|---|
duration.fast | 100ms | Small changes: hover, color, opacity. |
duration.base | 160ms | Most transitions. |
duration.slow | 240ms | Larger movement: drawers, dialogs. |
Easing
| Token | Value | Use for |
|---|---|---|
easing.standard | cubic-bezier(0.2, 0, 0, 1) | Elements that change in place. |
easing.enter | cubic-bezier(0, 0, 0, 1) | Elements that appear. |
easing.exit | cubic-bezier(0.3, 0, 1, 1) | Elements that leave. |
Reduced motion
When a visitor turns on reduced motion in their system settings, animations and transitions are turned off.
Guidance
Use fast (100ms) for hover, press, menus, selects and tooltips. Use base (160ms) for dialogs and toasts. Don't animate data in tables. With reduced motion on, nothing moves.