Home > Web Front-end > CSS Tutorial > No Motion Isn't Always prefers-reduced-motion

No Motion Isn't Always prefers-reduced-motion

尊渡假赌尊渡假赌尊渡假赌
Release: 2025-03-14 09:59:11
Original
750 people have browsed it

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;
  }
}
Copy after login

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); }
  }
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template