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.

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.
  • 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 about:config: Add a number preference called ui.prefersReducedMotion and set its value to 1. Changes to this preference take effect immediately.

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 {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-reduced-motion media featureChrome Full support 74Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 62Safari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android Full support 53Safari iOS Full support 10.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also