Theprefers-reduced-motionCSSmedia 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 withvestibular motion disorders. Animations such as scaling or panning large objects can be vestibular motion triggers.

Syntax

no-preference

Indicates that a user has made no preference known on the device. This keyword value evaluates as false.

reduce

Indicates that a user has enabled the setting on their device for reduced motion. Thereduce keyword value evaluates as true; therefore,@media (prefers-reduced-motion) is equivalent to@media (prefers-reduced-motion: reduce).

User preferences

For Firefox, thereduce request is honoured if:

• In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on.

  • In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
  • Alternatively, addgtk-enable-animations = false to the[Settings] block ofthe GTK 3 configuration file.
  • Additionally, try runninggsettings set org.gnome.desktop.interface enable-animations false to make Firefox (and other programs relying on GTK version 4) respect thereduce setting.

• In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".

  • Alternatively, addAnimationDurationFactor=0 to the[KDE] block of~/.config/kdeglobals.
  • Or just runkwriteconfig6 --key AnimationDurationFactor 0 in your terminal.

• In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.

• In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects

• In macOS: System Settings > Accessibility > Display > Reduce motion.

• In iOS: Settings > Accessibility > Motion.

• In Android 9+: Settings > Accessibility > Remove animations.

• In Firefoxabout:config: Add a number preference calledui.prefersReducedMotion and set its value to either0 for full animation or to1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.

Examples

This example uses a scaling animation for the purpose of demonstratingprefers-reduced-motion. If you enable the setting for reducing motion in the accessibility preferences on your device, theprefers-reduced-motion media query will detect your preference and the CSS within the reduced motion rules, with the samespecificity but coming later in theCSS source order, will take precedence. As a result, theanimation on the box will tone down to thedissolve animation, which is a more muted animation that is not a vestibular motion trigger.

Toning down the animation scaling

HTML

<div>animated box</div>

CSS

.animation {  animation: pulse 1s linear infinite both;  background-color: purple;}/* Tone down the animation to avoid vestibular motion triggers. */@media (prefers-reduced-motion: reduce) {  .animation {    animation: dissolve 4s linear infinite both;    background-color: green;    text-decoration: overline;  }}

.animation {  color: white;  font: 1.2em sans-serif;  width: 10em;  padding: 1em;  border-radius: 1em;  text-align: center;}@keyframes pulse {  0% {    transform: scale(1);  }  25% {    transform: scale(0.9);  }  50% {    transform: scale(1);  }  75% {    transform: scale(1.1);  }  100% {    transform: scale(1);  }}@keyframes dissolve {  0% {    opacity: 1;  }  50% {    opacity: 0.3;  }  100% {    opacity: 1;  }}

Result

You can enable the setting for reducing motion onyour device to view the change in animation scaling. This example uses the background color and the line over the text to visually highlight when the keyframe animation switches in response to the setting being enabled or disabled.

Specifications

Browser compatibility

See also

• Sec-CH-Prefers-Reduced-Motion HTTP HeaderUser Agent Client Hint
• An introduction to the reduced motion media query on CSS-Tricks (2019)
• Responsive design for motion on WebKit Blog (2017)