prefers-reduced-motion

Some users get nauseous from animation

About 2-3% of people experience vestibular dysfunction. Parallax scrolling, animated backgrounds, page-transition spins make them physically ill. macOS/iOS/Android/Windows have a "Reduce motion" toggle in accessibility settings, and CSS can read it:

.hero {
  animation: pulse 2s infinite;
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
    transition: none;
  }
}

A common pattern: "global motion off"

Most projects ship one global reset block:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This kills every animation site-wide for opted-in users. 0.01ms instead of 0s keeps event listeners that depend on animationend working.

When to NOT respect it

Animation that's part of the user-facing FEATURE (a chart animating in real time) is content, not decoration — keep it. The opt-out is for incidental motion (hovers, parallax, page transitions, loading spinners that spin gratuitously).

Test it

In macOS: System Settings → Accessibility → Display → Reduce motion. In Chrome DevTools: Rendering panel → "Emulate CSS media feature prefers-reduced-motion."