prefers-reduced-motion media query
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.
Such animations can trigger discomfort for those with vestibular motion disorders. Animations such as scaling or panning large objects can be vestibular motion triggers.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 74 | 79 | 63 | 10.1 | 74 | 10.3 | |
| Other | ||||||
Sec-CH-Prefers-Reduced-Motion Experimental The HTTP Sec-CH-Prefers-Reduced-Motion request header is a user agent client hint which indicates the user agent's preference for animations to be displayed with reduced motion. | 108 | 108 | | | 108 | |
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.