Reduced Motion

`prefers-reduced-motion` exposes the user's preference to disable animations. A small global rule handles it.

3 min read Level 1/5 #css#accessibility#motion

What you'll learn

Detect the user's motion preference
Disable animations site-wide when requested
Keep meaningful transitions (just faster)

Some users have vestibular disorders that make on-screen motion cause nausea or dizziness. Big swooping animations are especially bad. The browser exposes their setting via prefers-reduced-motion.

Global Reset

@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;
  }
}

When the user has reduced motion on, every animation and transition effectively snaps. State changes still happen — they just don’t animate.

Per-Animation Control

For more nuance — keep small UI transitions, disable big ones:

.modal {
  animation: slideUp 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: fadeIn 100ms ease;   /* still visible, no motion */
  }
}

Reduced motion doesn’t mean no motion — it means subtle motion. A fade is fine; a slide is not.

In JavaScript

const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;

if (!prefersReducedMotion) {
  // start the parallax animation
}

matchMedia works for any media query.

`scroll-behavior: smooth`

Smooth scrolling is also motion. Always disable it for users with the preference set — which the global rule above already does.

How To Test

macOS — System Settings → Accessibility → Display → Reduce motion
Windows — Settings → Accessibility → Visual effects → Animation effects
iOS / Android — similar accessibility settings

Or in DevTools — emulate the preference via the Rendering panel (Chrome) or Accessibility inspector (Firefox).

Up Next

CSS performance — what’s fast, what’s slow, what to watch for.

CSS Performance →