Not every animation is perceived as a simple visual flourish. For some users, a sliding fade, a carousel that scrolls endlessly, or a pulsing background can trigger dizziness, nausea or migraines, particularly for people with vestibular disorders. The prefers-reduced-motion media query lets CSS detect that the user has explicitly asked, at the system level, for animations to be kept to a strict minimum.
This preference has existed in operating systems for a long time, under names such as Reduce Motion on iOS and macOS or Show animations in Windows, but it stayed invisible to the web until a media query made it readable from a stylesheet. Since its wide adoption by browsers, honoring prefers-reduced-motion has become a baseline accessibility practice, on par with color contrast.
Definition
prefers-reduced-motion is a CSS Media query that detects whether the user has enabled, in their operating system settings, an option requesting that non essential animations and transitions be limited. It accepts two values: reduce, when the user has asked for reduced motion, and no-preference, the default value when nothing has been set.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}Why this is not just a comfort setting
Contrary to a common assumption, this media query does not only serve people who simply find animations annoying. It matters in particular for people with vestibular disorders, a category of conditions affecting the inner ear and the parts of the brain that regulate balance. For these users, even a brief on screen motion can trigger a very real sense of imbalance, nausea, or migraines lasting hours after the tab has been closed. Ignoring this setting effectively makes a site unusable for part of the audience, not merely less pleasant to browse.
This is why honoring prefers-reduced-motion is not an aesthetic comfort choice comparable to picking a font, but belongs to the same category of obligations as text contrast or keyboard navigation in a serious accessibility effort.
Reducing motion without removing every animation
The simplest answer, disabling every single transition and CSS animation outright, works but is not always the best one. A good practice is to separate decorative motion, which should be removed without hesitation, from motion that helps orient the user, such as a moving focus indicator or a state change cue, which can simply be shortened instead of eliminated.
.carousel {
animation: slide 6s infinite;
}
@media (prefers-reduced-motion: reduce) {
.carousel {
animation: none;
}
.focus-indicator {
transition-duration: 0.05s; /* shortened rather than removed */
}
}The trap of animations labeled essential
prefers-reduced-motion because it is not purely decorative. In reality, the correct fix is almost never to ignore the setting, but to replace the motion with another signal, such as an instant opacity change or a border change, which communicates just as well without producing on screen movement.How to test this behavior
Chrome, Firefox and Safari all let developers simulate this preference directly from developer tools, without needing to change system settings, which makes testing fast during development. In JavaScript, the same information is available through window.matchMedia('(prefers-reduced-motion: reduce)').matches, useful whenever a third party library manages its own animations outside of CSS.
| Value | Meaning | Recommended action |
|---|---|---|
no-preference | No particular setting detected | Normal animations |
reduce | The user has requested reduced motion | Remove decorative motion, shorten useful motion |
Frequently asked questions
No, the goal is not to systematically disable all motion, but to remove what is purely decorative while keeping, in a shorter or more subtle form, the animations that genuinely help users understand a state change, such as an error message appearing.
prefers-color-scheme?Both belong to the same family of media queries that read system preferences tied to comfort and accessibility, alongside prefers-color-scheme, but they are entirely independent from one another and can be freely combined in the same stylesheet.
The rule is simply ignored, like any unrecognized media query, and animations display normally without any reduction. There is therefore no risk in using it, even on a site that still needs to support older browsers.