The prefers-reduced-motion
CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.
no-preference
reduce
This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.
<div class="animation">animated box</div>
.animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; -webkit-animation: none; } }
Specification | Status | Comment |
---|---|---|
Unknown The definition of 'prefers-reduced-motion' in that specification. | Unknown | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | 63 | No | No | 10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | No | No | 10.3 | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion