No Motion Isn't Always prefers-reduced-motion

Many developers utilize a common CSS snippet when addressing the prefers-reduced-motion media query. This snippet aims to eliminate all motion on a website if the user has enabled reduced motion settings in their operating system. However, this approach isn't always ideal.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

The Importance of prefers-reduced-motion

The prefers-reduced-motion setting addresses accessibility concerns related to on-screen motion. For individuals with vestibular disorders, migraines, or seizure triggers, excessive animation can be debilitating. As Eric Bailey notes, web browsing can become a minefield of unexpected animations.

Subtlety Over Suppression

While the urge to completely remove all animation is strong, this is often counterproductive. Animation can enhance accessibility, for example, by clarifying complex interactions or relationships between elements. Completely disabling animation removes these beneficial aspects. A more nuanced approach is preferable; reducing, slowing, or modifying animations rather than eliminating them entirely.

Ben Nadel demonstrated a superior method, using multiple @keyframes to offer both a full animation and a reduced-motion version. A modal, for instance, might use both fade-in and scale-in by default, but only fade-in when prefers-reduced-motion is active.

/* Default: Reduced motion animation */
@keyframes modal-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Override for no-preference: Full animation */
@media (prefers-reduced-motion: no-preference) {
  @keyframes modal-enter {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1.0); }
  }
}

This approach prioritizes a thoughtful, reduced-motion solution over a blanket ban on all movement.

Beyond CSS: JavaScript Animations

The initial CSS snippet only effectively manages CSS-driven animations. JavaScript animations may behave unpredictably, potentially leading to unintended consequences, such as extremely fast and disorienting animations, as Josh Comeau has observed. Therefore, a comprehensive strategy must consider both CSS and JavaScript animations.

The above is the detailed content of No Motion Isn't Always prefers-reduced-motion. For more information, please follow other related articles on the PHP Chinese website!