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 compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari Full support 10.1WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

Document Tags and Contributors

Contributors to this page: jhpratt, mfuji09, chrisdavidmills, rachelandrew
Last updated by: jhpratt,