Three durations · two easings · one switch
Motion
Nothing moves for pleasure. A transition confirms a change under the pointer; the busy ring says a wait; and under reduced motion the base layer sets every duration to zero, so no component has to remember the media query.
Durations and easings
Under prefers-reduced-motion the base layer sets every duration to zero.
| Token | Value | Where |
|---|---|---|
--rl-duration-fast | 120ms | A border or a background changing under the pointer. |
--rl-duration-base | 200ms | |
--rl-duration-spin | 900ms | One turn of the busy ring. |
--rl-ease | ease | |
--rl-ease-out | cubic-bezier(0.2, 0, 0, 1) |
The busy ring
The one place where two settings deliberately give two images. With motion, a ring turns beside the label of a busy button; without it there is no ring, because frozen it would say nothing one does not already know, and the withdrawn ink and the cursor carry the wait. Turn reduced motion on in your system to see the second image.