W3cubDocs

/CSS

prefers-reduced-motion

Warning: 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.

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.

@media (prefers-reduced-motion) {
  /* styles to apply if the user's settings are set to reduced motion */
}

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.
  • In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
  • In iOS: Settings > Accessibility > Motion.
  • In Android 9+: Settings > Accessibility > Remove animations.
  • In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. 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: dissolve 2s linear infinite both;
  }
}

Result

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
prefers-reduced-motion 74 79 63 No 62 10.1 74 74 64 53 10.3 11.0

See also

© 2005–2023 MDN 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