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 non-essential motion it uses.

For Firefox, the reduce request is honoured if:

• In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
  • Alternatively, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file.
• 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 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 Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to 1. Changes to this preference take effect immediately.

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.

<div class="animation">animated box</div>

.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-name: dissolve;
  }
}