Widely available Should be part of any interface that uses non-trivial animation or scrolling effects.

prefers-reduced-motion media query

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 a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.

Such animations can trigger discomfort for those with vestibular motion disorders. Animations such as scaling or panning large objects can be vestibular motion triggers.

AccessibilityMotionMedia Queries

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.prefers-reduced-motion
74
79
63
10.1
74
10.3
http.headers.Sec-CH-Prefers-Reduced-Motion
Experimental

The HTTP Sec-CH-Prefers-Reduced-Motion request header is a user agent client hint which indicates the user agent's preference for animations to be displayed with reduced motion.
108
108
108
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Disable animations when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Apply animations only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: fadeIn 0.6s ease-out;
  }
}

Live demo

animation with

prefers-reduced-motion animation with demo.

PreviewFullscreen

mo-tionlightsupport

prefers-reduced-motion mo-tionlightsupport demo.

PreviewFullscreen

spinnerexample

prefers-reduced-motion spinnerexample demo.

PreviewFullscreen

Use cases

  • Reducing decorative motion

    Turn off ambient movement, looping animation, and parallax when the user requests reduced motion.

  • Simplifying transitions

    Replace long animated state changes with shorter or instant transitions to reduce discomfort.

Cautions

  • Reduced motion does not always mean no motion, but the alternative should meaningfully lower intensity and frequency.
  • Avoid putting essential information only inside animations that disappear when motion is reduced.

Accessibility

  • Respecting reduced motion is one of the clearest ways to reduce vestibular discomfort in animated interfaces.

Related links