prefers-reduced-motion Explained

Why This Accessibility Setting Exists

Some people experience genuine physical discomfort - dizziness, nausea, or migraine symptoms - from large-scale motion and parallax effects on screen. Operating systems let users turn on a "reduce motion" setting, and CSS can detect and respect that preference directly.

Detecting the Preference

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

This is a common blanket approach: when the user has requested reduced motion, animations and transitions are effectively made instantaneous across the whole site, rather than being individually disabled one by one.

A More Deliberate, Per-Component Approach

.hero-animation {
  animation: slide-in 0.6s ease-out;
}

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

Rather than a global override, some projects choose to remove only the larger, more disorienting animations (parallax scrolling, large sliding entrances) while keeping small, subtle transitions (like a button's hover color change) intact, since those rarely trigger discomfort.

Why This Is Considered a Real Accessibility Requirement

Respecting prefers-reduced-motion is included in accessibility guidelines (WCAG) precisely because motion sickness from web animations is a documented, real barrier for a meaningful portion of users - not a rare edge case to deprioritize.

How to Test It

Most operating systems expose this setting directly (for example, under accessibility or display settings), and browser developer tools typically let it be simulated without changing the actual OS setting, making it easy to verify during development.