Reduce Motion

The prefers-reduced-motion media query is an essential tool when coding for accessibility. Features like animation can trigger motion sickess or be overly distracting to the visually impaired. This query will honour a user's browser or operating system settings around reducing motion.

@media (prefers-reduced-motion: reduce) {
  * {
      animation: none !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
  }
}
Copy this snippet