Skip to content

Instantly share code, notes, and snippets.



Last active Apr 8, 2019
What would you like to do?
Code examples for Reduced Motion Queries
/*Learn more:*/
/* Quick and dirty attempt to remove ALL the motion */
@media (prefers-reduced-motion) {
*:after {
animation: unset !important;
transition: none !important;
/* Detect users that prefer no motion in your js*/
if (!(window.matchMedia('(prefers-reduced-motion)').matches)) {
// initialsie animation
/* Create a utility class for users that prefer no motion */
if (window.matchMedia('(prefers-reduced-motion)').matches) {
/* Nested parent selector example */
.selector {
//styles that include motion
.prefers-no-motion & {
// stop the motion

This comment has been minimized.

Copy link
Owner Author

@jesseyuen jesseyuen commented Apr 8, 2019

updated to public

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment