Motion
Three durations and two easing curves (ADR 0034). The durations were promoted from 26 literals across 13 components, so on their own they changed nothing. --ease-out is the part that did: it replaced the native ease-out keyword at every one of those call sites, so the whole system leaves faster and settles longer than it used to.
Names carry the job rather than the number, because the number is the part that drifts. Hover or tab to a bar to run it.
Durations
fast is a state change on something already under the pointer.base is a thing that moves, grows or slides. slow is an entrance that plays once — the hero and the detail-page overview, nothing a visitor triggers. All three run on --ease-out here.
- --duration-fast
120ms - --duration-base
150ms - --duration-slow
600ms
Easings
Both run at --duration-slow below, which is far longer than either is used for — a 120ms curve is felt, not seen, so it has to be stretched to be read. --ease-in-out has no call site yet; it was decided alongside its pair.
- --ease-out
cubic-bezier(0.2, 0, 0, 1) - --ease-in-out
cubic-bezier(0.6, 0, 0.2, 1)
Where it shows
Two places are worth looking at rather than reading about: a link's underline swells on hover (Link), and a button's fill sweeps up from its bottom edge (Button). Both are the same two tokens.
Under prefers-reduced-motion none of this runs.reset.css clamps every transition and animation to 0.01ms with!important, which outranks a component's own unlayered rule, so each of these lands on its end state instead of travelling to it. A component does not need — and should not add — its own media query for that.