frippz.se

There’s an accessibility setting in macOS and iOS that allows users to reduce motion in the interface. On iOS, this removes animations in the OS itself and well made apps should also respect this setting. In CSS there’s a media query for it; (prefers-reduced-motion: reduce), which has for example been supported in Safari since version 10.1. If you are using animations on your website, consider adding this snippet to your stylesheet.

@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

But why didn’t I remove the transition and animation durations altogether? Well, retaining the durations but changing them to something that’s imperceptible to the human eye, helps to avoid breaking anything that is tied to CSS-based animations. Make sure test your site, though. I’ve seen stuff break in the weirdest of ways with this styling, so your mileage may vary. Resetting animation-iteration-count disables infinite animations, instead of making the loop crazy fast!

Browser and OS support

Almost all of the major browsers has had support for a good while, the exception being Legacy Edge, which lacks support entirely. Check caniuse.com for more details.

Supporting browsers can read this preference from the OS of your choice. A few examples below.

Windows 10

1. Settings
2. Ease of Access
3. Display
4. Show animations in Windows.

Windows 7

1. Control Panel
2. Ease of Access
3. Make the computer easier to see
4. Turn off all unnecessary animations (when possible).

macOS

1. System Preferences
2. Accessibility
3. Display
4. Reduce motion.

iOS/iPadOS

1. Settings
2. General
3. Accessibility
4. Reduce Motion.

Android 9+

1. Settings
2. Accessibility
3. Remove animations.

Remember, respect your users. ❤️