{"id":363057,"date":"2022-02-08T12:55:51","date_gmt":"2022-02-08T20:55:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363057"},"modified":"2022-02-08T12:55:54","modified_gmt":"2022-02-08T20:55:54","slug":"nuking-motion-with-prefers-reduced-motion","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/nuking-motion-with-prefers-reduced-motion\/","title":{"rendered":"No Motion Isn’t Always prefers-reduced-motion"},"content":{"rendered":"\n

There is a code snippet that I see all the time when the media query prefers-reduced-motion<\/code> is talked about. Here it is:<\/p>\n\n\n\n

@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}<\/code><\/pre>\n\n\n\n
This is CSS that attempts to obliterate any motion on a website under the condition that the user has specified a preference for reduced motion in the accessibility preferences of their operating system.<\/p>\n\n\n\n\n\n\n\n
\"prefers-reduced-motion<\/figure>\n\n\n
Why prefers-reduced-motion<\/code> matters<\/h3>\n\n\n
The reason this setting exists is that on-screen movement is an accessibility concern. Here’s Eric Bailey<\/a>:<\/p>\n\n\n\n
Vestibular disorders<\/a> can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system.<\/p>
Vestibular disorders can be caused by both genetic and environmental factors. It\u2019s part of the larger spectrum of conditions<\/a> that make up accessibility concerns and it affects more than 70 million people<\/a>.<\/p><\/blockquote>\n\n\n\n
Here he is again in a follow-up article<\/a>:<\/p>\n\n\n\n
If you have a vestibular disorder or have certain kinds of migraine or seizure triggers, navigating the web can be a lot like walking through a minefield<\/a> \u2014 you\u2019re perpetually one click away from activating an unannounced animation. And that\u2019s just for casual browsing.<\/p><\/blockquote>\n\n\n
Reduced motion vs. nuked motion<\/h3>\n\n\n
Knowing this, the temptation might be high to go nuclear on the motion and wipe it out entirely when a user has specified a reduced motion preference. The trouble with that is \u2014 to quote Eric again \u2014 “animation isn’t unnecessary.” Some of it might be, but animation can also help<\/em> accessibility. For example, a “transitional interface”<\/a> (e.g. a list that animates an opening for a new item to slide into it) can be very helpful:<\/p>\n\n\n\n
Animation can be a great tool to help combat some forms of cognitive disability by using it to break down complicated concepts, or communicate the relationship between seemingly disparate objects. Val Head\u2019s article on A List Apart<\/em><\/a> highlights some other very well-researched benefits<\/a>, including helping to increase problem-solving ability, recall, and skill acquisition, as well as reducing cognitive load<\/a> and your susceptibility to change blindness<\/a>.<\/p><\/blockquote>\n\n\n\n
\n