What is Reduced Motion Media Query?

Question

I recently saw that there is the concept of Reduced Motion Media Query in the CSS, which apparently is a response to the animation settings in the client’s browser and is used in code primarily by query prefers-reduced-motion.

• What exactly is prefers-reduced-motion?
• How we can use it in an application?
• What support for this function in browsers?
• How to enable reduced motion option in browsers?

Answer 1

*First I need to make some clarifications about the Animation Reduction Preferences. *

Apparently when Apple made a upness from iOS to version 7 in 2013 she had a negative feedback from several people presenting vertigo and hand be using the new version of the Operating System brand of the mace. This problem apparently was due to some people presenting a disorder of Vestibular System when using the new OS of the company that came with various animations, effects of zoom and Blur in the screen transitions etc... As soon as Apple realized this, it updated the platform with an option to decrease or remove native animations from the system. So today, even in Windows, you can enter the system settings and "turn off" the visual animations if you feel more comfortable without them.

---

Now let’s talk about CSS

Once explained about the User Preferences in the Operating Site we will see what is the prefers-reduced-motion

The prefers-Reduced-motion CSS media Feature is used to Detect if the user has requested that the system minimize the amount of Animation or motion it uses.

Translation: "The prefers-Reduced-motion CSS feature is used to detect whether the user has requested the system to minimize the amount of animation or movement it uses. "

no-preference

Indicates that the user has not made any known preference for the system.

reduce

Indicates that the user has notified the system that he prefers an interface that minimizes the amount of movement or animation, preferably to the point where all nonessential movement is removed.

In this CSS we have a simple animation, but if the user has set in his OS he wants to reduce or eliminate the animations of the screen the @media (prefers-reduced-motion: reduce) will set the animation to null none. So only for users who expressly define that they do not want animation in OS CSS will use this rule to remove animation from the browser screen.

.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
   /* para quem definiu reduzir animação o animation é none */
  .animation {
    animation: none; 
    -webkit-animation: none;
  }
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-Reduced-motion

Support from the Browsers:

According to Caniuse the support of browsers is still very restricted. Even if Ios and Windows already have this option in the Operating System the browser also needs to support this property so that the user can notice a Reduction of Animation also in the browser: https://caniuse.com/#search=prefers-Reduced-motion

---

UX vs Dyslexia vs TDAH DDA

By making your animations always take into account that users with attention deficit problems, dyslexia or even epicalícia, may have a bad experience of use if they feel uncomfortable with excessive movements on the screen. Therefore whenever possible use the prefers-reduced-motion to respect the Usage Preferences stated by users. Movements on the screen can draw the user’s attention by shifting the content focus to the moving object, the animation features should always be weighted. Nielsen article on the subject: https://www.nngroup.com/articles/animation-usability/

Resource consumption

I don’t currently have style support, but in a simple test I noticed that if Browser does not support @media/prefers-reduced-motion is simply ignored by the browser. Unable to perform a performance test I saw no changes in FPS or memory consumption for example...

Image with enabled feature reduce and no-preference