A few months ago I came across a media query for Reduced Motion in CSS. Some users may find some animated motions on websites can make them feel ill. These users can switch on the Reduced Motion setting in their operating system to try and limit these motions.

As web developers we can help by using CSS (and javaScript) to respect that setting.

CSS Media Query for Reduced Motion

Within the media query you can add settings to prevent transitions or animation from happening.

You can even add a wildcard rules so that any transitions or transforms and animations are prevented as I have in the code below.

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto; // override smooth scrolling
	}
	* {
		transition: none !important;
		animation: none !important;
		transform: none !Important;
	}
}

Pitfalls

You may find the wildcard approach may disable some transitions or transforms or animations you want to keep so you may have to add some overrides when using that approach or use the css :not notation to ignore certain classes or elements.

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto; // override smooth scrolling
	}
	* {
		transition: none !important;
		animation: none !important; 
	}
        // this ignores the elements and classes specified but targets everything else.
	*:not(path, text, g, polyline, rect, svg, clipPath, image, .svg, .mapholder, use) {
		transform: none !Important;
	}
}

JavaScript Respect Reduced Motion

For JavaScript you can use the following code to check if the user has reduced motion set. Then test the matches – if it returns true then the user has reduced motion set.

var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

if(mediaQuery.matches) {
	$('#'+defid).toggle();  // show and hide rather than...
} else {
	$('#'+defid).slideToggle();  // sliding up and down
}

Further Reading

https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
https://alistapart.com/article/accessibility-for-vestibular/