1 · Hover lift
Button rises 2px on hover. Affordance hint — element is interactive.
transform · 120ms · ease-out trigger: :hoverDuration
| Token | Value | Use |
|---|---|---|
--duration-instant | 0ms | Snap (a11y fallback) |
--duration-fast | 120ms | Hover, tap, exit |
--duration-normal | 200ms | Default · color, tooltip |
--duration-slow | 320ms | Modal, drawer enter |
--duration-slower | 480ms | Page surface change |
--duration-deliberate | 800ms | Hero, full route |
Easing
| Token | Curve | Use |
|---|---|---|
--ease-out | 0.16, 1, 0.3, 1 | Most exits, modal in |
--ease-in | 0.7, 0, 0.84, 0 | Most entries, modal out |
--ease-in-out | 0.65, 0, 0.35, 1 | Accordion, tab |
--ease-snap | 0.4, 0, 0.2, 1 | Utility default (M3 std) |
--ease-spring | 0.34, 1.56, 0.64, 1 | Confirm, success |
--ease-emphasized | 0.2, 0, 0, 1 | Hero, page transition |
--ease-linear | linear | Spinner, progress |
Patterns
2 · Click press
Button compresses on press. Tactile feedback for fingers/cursor.
transform · 120ms · ease-snap trigger: :active3 · Modal entry
Backdrop fades + dialog scales 0.92 → 1. Slow + emphasized for focal moment.
opacity + scale · 320ms · ease-emphasizedHi from a modal
4 · Toast slide-up
Snackbar enters from bottom with fade. Non-blocking confirmation.
opacity + slide 16px · 200ms · ease-outSaved · 2 sec
5 · Skeleton shimmer
Gradient slides across placeholder. Loading state — essential, exempt from reduce.
background-position · 1.4s · linear · loop6 · Accordion expand
grid-template-rows trick animates height without JS measurement. Symmetric ease.
grid-template-rows · 200ms · ease-in-outHidden content reveals smoothly. Works on dynamic-height content because grid-row interpolates fr.
7 · Drawer slide
Side panel enters from right edge. M3 emphasized curve for focal surface change.
translateX · 320ms · ease-emphasizedDrawer content
8 · Tab indicator
Underline slides under active tab. Spatial continuity — tab is one shared element.
transform + width · 200ms · ease-out
Overview
Activity
Settings
9 · Focus ring
Ring fades in instead of jumping. Visible focus is mandatory (WCAG 2.4.7).
outline · 120ms · ease-out trigger: :focus10 · Spinner
Indeterminate loading. Linear so it doesn't seem to speed up/slow down.
rotate · 0.8s · linear · loop
trigger: always (motion-essential)
11 · Progress
Bar fills with ease-in-out so deceleration suggests target. Indeterminate variant loops.
width · 2.4s · ease-in-out · loop12 · Stagger list
List items appear sequentially. 50ms delay between each item — perceived as orchestrated.
opacity + slide · 200ms · ease-out · 50ms staggerFirst item
Second item
Third item
Fourth item
Fifth item
13 · Spring confirm
Success checkmark overshoots then settles. Delight for completed action.
scale 0→1 · 320ms · ease-spring✓
14 · Page transition
Outgoing page slides up + fades, incoming slides up into place. Deliberate hero motion.
opacity + slide 32px · 800ms · ease-emphasizedPage A
Page B
15 · Card hover
Card scales 1.03 + tonal shadow. Brand-tinted shadow signals depth, not just elevation.
transform + shadow · 200ms · ease-outHover me