W3cubDocs

/CSS

@media.prefers-reduced-motion

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.

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 minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

Examples

This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.

HTML

<div class="animation">animated box</div>

CSS

.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;
  }
}

Result

Specifications

Specification Status Comment
Unknown
The definition of 'prefers-reduced-motion' in that specification.
Unknown Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

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 ?

See also

© 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