prefers-reduced-motion: Sometimes less movement is more
- Too much motion in real life and on the web
- Animation on the web
- Motion-triggered vestibular spectrum disorder
- Remove motion on operating systems
- Remove motion on the web
- Working with the media query
- Demo
- Conclusions
- (Bonus) Forcing reduced motion on all websites
- Related Links
- Acknowledgements
ShareSubscribe
prefers-reduced-motion: Sometimes less movement is more
The prefers-reduced-motion media query detects whether the user has requested the operating system to minimize the amount of animation or motion it uses.
Mar 11, 2019 • Updated Dec 10, 2019
Appears in: Animations
Thomas Steiner
Not everyone likes decorative animations or transitions, and some users outright experience motion sickness when faced with parallax scrolling, zooming effects, and so on. Chrome 74 supports a user preference media query prefers-reduced-motion that lets you design a motion-reduced variant of your site for users who have expressed this preference.
Too much motion in real life and on the web #
The other day, I was ice skating with my kids. It was a lovely day, the sun was shining, and the ice rink was crammed with people ⛸. The only issue with that: I don’t cope with crowds well. With so many moving targets, I fail to focus on anything, and end [...]