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.

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

Discussion

  1. 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!