Animation and Respect Prefers-reduced-motion

Set your website to respect prefers-reduced-motion and prevent animation from being displayed.

For example in connection with anchor/jump links.

Add the following CSS media query to the site.

@media (prefers-reduced-motion: reduce) {

  /* CSS to disable motion goes here */

}

When the user selects an anchor/jump link the page will smooth-scroll to the content selected, instead of a hard and abrupt jump.

Users can set their OS to indicate their motion preference.

This is supported by Chrome, Safari, Firefox, Edge

The 'prefers-reduced-motion' CSS Media Query will respect that choice.

Please see additional information.