Simulate reduced motion

CSS animation can 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. Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.

    Opening the command menu.

  2. Type reduced, to turn the simulation on and off. Select the Emulate CSS prefers-reduced-motion option, and then press Enter.

    The Emulate CSS prefers-reduced-motion option in the Command menu.

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

See also