I recently learned about the prefers-reduced-motion CSS media query. In a nutshell, if a user enables reduced motion on their device/browser, the CSS styles within this media query will be applied.

For example, if buttons have animations when they’re clicked like this:

1
2
3

button:active {
  transform: translateY(4px);
}

We can disable those animations if a user has enabled reduced motion on their device by using the prefers-reduced-motion media query like this:

1
2
3
4
5
6

@media (prefers-reduced-motion) {
    /* anything in here will apply on devices with reduced motion enabled */
    button:active {
        transform: none;
    }
}

Technically, the CSS being applied under prefers-reduced-motion doesn’t need to be related to motions or animations. It’s possible to do other things, like changing the background color, if a user prefers reduced motion. So something like this is possible too:

1
2
3
4
5
6
7
8
9

body {
  background-color: red;
}

@media (prefers-reduced-motion) {
    body {
        background-color: blue;
    }
}

The Mozilla docs cover how to enable reduced motion on several browsers:

References