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.

Not everyone likes decorative animations or transitions, and some users outright experience motion sickness when faced with parallax scrolling, zooming effects, and more. The user preference media query prefers-reduced-motion lets you design a motion-reduced variant of your site for users who have expressed this preference.

Browser Support

  • Chrome: 74.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 10.1.

Source

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 up lost and with a feeling of complete visual overload, almost like staring at an anthill 🐜.