Understanding user preference with prefers-reduced-motion

Most operating systems offer accessibility settings that allow users to disable animation effects. For instance, in Windows 11, you can navigate to Settings | Accessibility | Visual Effects | Animation Effects and uncheck the Animation Effects option to turn off animations.

igure 15.1: The Animation effects option in Window 11

In web applications, you can use the prefers-reduced-motion CSS media query to determine whether a user has activated a setting on their device to reduce or eliminate non-essential motion.

Here is an example of how to use the prefers-reduced-motion CSS media query:

@media (prefers-reduced-motion: reduce) {
  div {
    /* Removes animation */
    animation: none;
  }
}

In the preceding code snippet, if a user has indicated a preference for reduced motion, we set the CSS animation property to none to remove animation from the <div...