prefers-reduced-motion is a helpful accessibility query that every web developer should be using. It checks to see if a users system has been instructed to minimize motion. Some may be negatively impacted by animations such as bouncing buttons, scrolling marquees, and autoplaying media.

To stop this, a systemwide preference of "reduce motion" can be set. Here's an example of how to toggle this feature on Mac ->

And here's an example of how you implement this api in your CSS (sourced from web.dev).

If the user has toggled "reduce motion" on their system, the css in the media query for "prefers-reduced-motion: reduce" will be used.

CSS here should only use animation for essential user interactions, if at all.

If reduce motion is not toggled, code for "prefers-reduced-motion: no-preference" will be used.

Also, here's a helpful speed tip from Web.dev:

When implementing prefers-reduced-motion, it's important to test that your code actually does what you want it to.

Of course, you can go to your system settings and toggle this on and off. However, that can get tedious. It will also impact this setting system-wide, which may get confusing if you're expecting motion (or vice-versa) and not getting it.

Instead, there's a better way to test CSS for prefers-reduced-motion queries.

In Chrome, there's a little know setting in devtools that allows you to emulate this setting. Instead of turning it on system-wide, we can emulate it in the browser.

Doing this is easy.

First open devtools (F12). Then do CTRL/CMND + SHIFT + P, and type reduce.

Press enter or click the first item in the list, called "Emulate CSS prefers-reduced-motion: reduce".

And this setting will toggle prefers-reduced-motion: reduce without you needing to set it systemwide and reload your tab.

Just like that, you can now easily test your code for prefers-reduced-motion: reduce!