Reduced motion without JavaScript detection
Respecting a user's reduced motion preference required JavaScript to check window.matchMedia and conditionally skip animations. The prefers-reduced-motion media query lets CSS respond directly to the OS accessibility setting.
2 *, *::before, *::after {
3 animation-duration: 0.01ms !important;
4 }
5}
2const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
3if (mq.matches) {
4 document.querySelectorAll('.animated').forEach(
5 el => el.style.animation = 'none'
6 );
7}
Browser Support for Prefers reduced motion
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Accessibility without JavaScript
Users who experience motion sickness or vestibular disorders can set reduced motion in their OS. This media query lets CSS respond directly — no JavaScript needed.
Instant, no flash of animation
JavaScript runs after page load, so animations can briefly play before being disabled. CSS applies before paint, so reduced-motion users never see the animation at all.
Reduce, not necessarily remove
Use 0.01ms instead of 0 to preserve animation events that JavaScript might listen for. Or slow animations down with a longer duration rather than disabling them entirely.
How it works
Animations and transitions can cause problems for users with vestibular disorders or motion sensitivity. The traditional approach was to check window.matchMedia('(prefers-reduced-motion: reduce)') in JavaScript and remove animation classes. Because JavaScript runs after the page renders, animated elements could briefly play before being stopped.
@media (prefers-reduced-motion: reduce) applies before paint. Styles inside are active immediately when the OS setting is enabled. Setting animation-duration to 0.01ms effectively disables animations while preserving any JavaScript that listens for animationend events — using 0 skips the event entirely.