CodePark.card { transition: transform 300ms ease; }
.card:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.card { transition: opacity 150ms; }
.card:hover { transform: none; opacity: 0.9; }
}
// in JavaScript:
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
prefers-reduced-motion is a CSS media feature. It matches when the user has turned on "reduce motion" in their operating system settings.
Who needs it: people with vestibular disorders. These affect the inner ear and balance. For them, large movement like parallax scrolling, zooming or sliding panels can cause dizziness, nausea or headaches. Some people with attention difficulties also find motion distracting.
How to use it well:
- Reduce, don't just delete. Swap big movement for something calm, like a quick fade. Users still see that something changed.
- Target the big things first: parallax, large slides, scroll-linked animation, auto-playing carousels and smooth scroll.
- Small changes like a colour fade on hover are usually fine.
- Check it in JavaScript too, with
matchMedia, for JS-driven animation libraries. - Another approach is to write calm styles by default and add motion only inside
@media (prefers-reduced-motion: no-preference).
Related WCAG rules:
- 2.2.2 Pause, Stop, Hide (A): anything that moves on its own for more than 5 seconds needs a pause control.
- 2.3.3 Animation from Interactions (AAA): motion triggered by interaction can be turned off.
prefers-reduced-motion: reducematches when the user asks the OS for less motion.- Large motion can make people with vestibular disorders dizzy or sick.
- Replace big motion with calm effects like fades instead of removing all feedback.
- JavaScript animations can check the same setting with
matchMedia. - Content that moves on its own for more than 5 seconds needs a pause control.