Easing curves — 2 only
Every state change uses one of these. Out for entries and most UI motion (focus, hover, menus appearing). In-out for symmetric transitions (sheets, page transitions, anything that ends where it started).
--ease-out cubic-bezier(0.22, 1, 0.36, 1)
Decelerates into rest. Used for: enter, focus, hover, dropdown, toast in.
--ease-in-out cubic-bezier(0.65, 0, 0.35, 1)
Symmetric. Used for: sheets, modals, page transitions, anything reversible.
Duration scale — 3 only
If a transition doesn't fit one of these, it's wrong. Most UI is --dur-fast. Reserve --dur-slow for full-screen choreography.
--dur-fast
120ms
Hover, focus, toggle, color change, small UI shifts.
--dur-base
200ms
Dropdowns, popovers, tooltips, list-item enter/exit.
--dur-slow
320ms
Sheets, modals, page transitions, large layout shifts.
Recommended pairings — what to pick
Hover / focusfast · outFeels instant; never blocks input.
Dropdown / menu openbase · outAcknowledges the surface arriving without delaying.
Toast / notificationbase · outSlide-in, fade-out on dismiss.
Modal / sheetslow · in-outSymmetric — the user must perceive both directions.
Page / route changeslow · in-outSame reasoning as sheets.
Transfer progress barnone · linearReal data — don't ease real numbers, the bar's job is to tell the truth.
Focus-ring on TVfast · outMatch remote-input speed; lag is the #1 TV-UX defect.