Reduced motion simulation

Animation in web products may be an accessibility problem. Operating systems deal with this problem by including an option to turn off animations to avoid user confusion and potential health-related problems, such as triggering seizures.

On a webpage, you can use the prefers-reduced-motion CSS media query to detect whether the user prefers to display any animations. Then wrap your animation code in a test, to conditionally run animations.

@media (prefers-reduced-motion: reduce) {
  /* in case the .header element has an animation, turn it off */
  .header {
    animation: none;
  }
}

Then test your code, as follows.

To simulate the operating system's reduced motion setting, without having to change your operating system setting:

  1. Open the Command Menu.

    1. Select Control+Shift+P on Windows/Linux or Command+Shift+P on macOS.

      The Command Menu

  2. Type reduced, to turn the simulation on and off. Choose the option and select Enter.

    Turn on or off the prefers reduced motion setting from Command Menu

  3. Refresh the webpage and check whether your animations run.

See also