DocsFoundations

Motion

Three durations, two curves, reduced motion respected.

Durations

Three durations cover the whole product. Hover the panel (or focus it with Tab) to compare them.

anim-fast150 ms · Most control transitions: colour, border, small shifts.

anim-base200 ms · Fades: elements appearing and disappearing.

anim-slow300 ms · Larger moves: height changes and the slide between funnel steps.

Token	Curve	Use
`ease-out`	`cubic-bezier(0, 0, 0.2, 1)`	Most transitions: fast start, soft landing.
`ease-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	Slides between funnel steps.
`ease-in`	`cubic-bezier(0.4, 0, 1, 1)`	Elements leaving the screen.

Decorative motion, such as the confetti on the “account ready” screen, does not run when the system asks for reduced motion.
Motion never carries information: a state change is also visible as colour, text or position.
Pressing a button lowers its opacity to 90 %; it does not move.