The prefers-reduced-motion
CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.
Important: An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.
Syntax
no-preference
- Indicates that the user has made no preference known to the system.
reduce
- Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.
User preferences
For Firefox, the reduce
request is honoured if:
- In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
- Alternatively, add
gtk-enable-animations = false
to the[Settings]
block of the GTK 3 configuration file.
- Alternatively, add
- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
- In macOS: System Preferences > Accessibility > Display > Reduce motion.
- In iOS: Settings > General > Accessibility > Reduce Motion.
- In Android 9+: Settings > Accessibility > Remove animations.
- In Firefox
about:config
: Add a number preference calledui.prefersReducedMotion
and set its value to1
. Changes to this preference take effect immediately.
Examples
This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.
HTML
<div class="animation">animated box</div>
CSS
.animation { animation: pulse 1s linear infinite both; } /* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } }
.animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 5 The definition of 'prefers-reduced-motion' in that specification. |
Editor's Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
prefers-reduced-motion media feature | Chrome Full support 74 | Edge Full support 79 | Firefox Full support 63 | IE No support No | Opera Full support 62 | Safari Full support 10.1 | WebView Android Full support 74 | Chrome Android Full support 74 | Firefox Android Full support 64 | Opera Android Full support 53 | Safari iOS Full support 10.3 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
- An Introduction to the Reduced Motion Media Query (CSS Tricks)
- Responsive Design for Motion (WebKit Blog) includes vestibular motion trigger examples.