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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...

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!