Entry 01

Opt-in motion

Use it for every transition or animation that moves or scales something.

Hover the box. It scales with a transition. Turn on Reduce Motion in the system settings: it still scales, at once.

Code CSS · 7 lines

@media (hover: hover) and (pointer: fine) {
  .box:hover { transform: scale(1.2); }
}

@media (prefers-reduced-motion: no-preference) {
  .box { transition: transform 300ms var(--ease-out, ease-out); }
}

Why it works, the rules and the credits 1 reason · 3 rules · support · credits

Why it works

Motion exists only inside the query, so the default is none. People who never touched the setting match no-preference and see it.

Rules

Build the state change first and add the motion inside the query. Do not strip motion afterwards with a global rule that sets every duration to 0.01ms.
Fades of opacity and color are not motion and can stay outside the query.
Animation driven by a script checks the same query with matchMedia.

Support

Chrome: 74
Firefox: 63
Safari: 10.1

Credits

Borrowed from: Josh W. Comeau, Accessible Animations in React with "prefers-reduced-motion" · Kevin Powell, 3 super small changes to improve your CSS, 2023-03-07