prefers-reduced-motion media query
The prefers-reduced-motion media feature detects when a user asks for less motion. It is a core accessibility tool for reducing transitions, animation, and parallax effects.
Overview
The prefers-reduced-motion media feature detects when a user asks for less motion. It is a core accessibility tool for reducing transitions, animation, and parallax effects.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
http.headers.Sec-CH-Prefers-Reduced-Motion Experimental | 108 | 108 | | | 108 | |
| CSS at-rule | ||||||
| The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations. | 74 | 79 | 63 | 10.1 | 74 | 10.3 |
Syntax
/* Disable animations when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Apply animations only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
.hero {
animation: fadeIn 0.6s ease-out;
}
}Live demo
Use cases
Reducing decorative motion
Turn off ambient movement, looping animation, and parallax when the user requests reduced motion.
Simplifying transitions
Replace long animated state changes with shorter or instant transitions to reduce discomfort.
Cautions
- Reduced motion does not always mean no motion, but the alternative should meaningfully lower intensity and frequency.
- Avoid putting essential information only inside animations that disappear when motion is reduced.
Accessibility
- Respecting reduced motion is one of the clearest ways to reduce vestibular discomfort in animated interfaces.
Related links
Powered by web-features