Skip to content
GreenSnippets

Respect prefers-reduced-motion

Turn off or shorten animations for users who ask their system for less motion.

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

Example / expected output

Output
/* Test it: enable "Reduce motion" in your OS accessibility settings. */

How it works

Large movement can cause nausea or distraction for some people, and they signal this through an operating-system setting. The media query below cuts animation and transition durations and disables smooth scrolling for them. Essential animations (such as a progress spinner) can opt out with a more specific rule.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets