`prefers-reduced-motion`

an important, but often overlooked, CSS media feature

Write all CSS rules that should be applied to users requesting reduced motion content in a media query selecting the prefers-reduced-motion media feature.

Generic Animation Override Example

This snippet of CSS completely prevents most animations from happening on a webpage for users with reduced motion settings enabled. For all other users, it will still move.

@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

This snippet currently exists in the head of of this page. If you have enabled reduced motion settings on your machine, the header "Generic Animation Override Example" will not move. Additionally, the dark mode toggle at the top left of the page will also not slide, but snap into place as it is toggled.

Enabling Reduced Motion

To request usage of reduced motion media on your machine, take the appropriate actions as follows for the device being used:

Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
macOS: System Preferences > Accessibility > Display > Reduce motion.
iOS: Settings > General > Accessibility > Reduce Motion.
Android 9+: Settings > Accessibility > Remove animations.

As of Chrome 79, you can also test the prefers-reduced-motion feature in your browser without enabling the reduced motions settings across the entire OS.

Open the Chrome developer tools by inspecting the page, ctrl+shift+i, or otherwise.
Click on the 3 vertical dots it the top right, and click "Run command", OR press ctrl+shift+p while the dev tools are open.
Run the Show Rendering command. This will open the "Rendering" panel below.
Using the "Emulate CSS media feature prefers-reduced-motion" dropdown, select the "prefers-reduced-motion: reduce" option.