Prefers reduced Motion Media Query

Posted on

Motion effects on websites can cause problems for users with vestibular disorders. Safari added the Reduced Motion Media Query which can be used to target devices with the ‘Reduced Motion’ setting enabled on iOS 10.1 and newer.

It can be used to disable transitions, transforms and animations. 

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    transform: none !important;
  }
}

I’ve set this on this site so the header images don’t fade in and the glitch effect isn’t active. You can test on an iPhone/iPad by enabling ‘Reduce Motion’ in Settings > General > Accessibility.

Feel free to use the above CSS on your site, but be sure to test your site if your site makes use of animations, transforms and/or transitions to make sure it works correctly for all users.

Track implementation progress with other browsers here:

You might also like