Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

CSS prefers-reduced-motion Media Query

By  on  

When I started in the web development industry, media queries were limited -- screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color scheme preference. I've been so happy to see CSS evolve beyond incredibly generic settings.

One of the CSS media queries I've recently discovered is prefers-reduced-motion, a media query for users sensitive to excessive motion.

Let's use prefers-reduced-motion to show motion to all users but none to sensitive users:

.animation {
  animation: vibrate 0.2s; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

The example above illustrates how we can cater to sensitive users by not animating elements for those who have said they don't want them.

It's amazing how media queries like this can really show users that you care. Sure, we love the fancy razzle-dazzle but not everyone can handle that motion.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

Discussion

  1. Facundo Corradini

    Hey David!

    As someone that has suffered vestibular disorders before, prefers-reduced-motion is a godsend.

    A somewhat better, broader implementation is using the a really short animation-duration instead of animation: none, as it’s fairly common to implement animations in such a way that starts off screen or otherwise invisible, which could mean the elements don’t show up at all if using animation: none. Iteration count will prevent us from getting infinite loops.

    Same thing can be achieved for transitions. 

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

  }
}

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!