Foundations
Motion
Stance motion tokens: durations and easing curves for hover, overlays and dialogs, with reduced-motion support and rules for purposeful animation.
Motion in Stance is quick and purposeful. It confirms cause and effect and is never decorative. Every duration drops to zero when the user prefers reduced motion.
Durations
| Token | Value | Use |
|---|---|---|
--st-duration-instant | 0ms | State changes with no transition |
--st-duration-fast | 120ms | Hover, press, colour changes |
--st-duration-normal | 200ms | Popovers, menus, toasts |
--st-duration-slow | 320ms | Dialogs, drawers, sheets |
Easing
--st-easing-standard--st-easing-emphasized--st-easing-exitRules
- Enter with
emphasizedand exit withexit; exits are faster than entrances. - Animate opacity and transform only, never layout properties.
- Nothing loops except progress indicators.