CSS: Adapting Animations to User Preferences with prefers-reduced-motion

Accessibility is now a key pillar of modern web design. It goes beyond color contrast and screen reader compatibility. One often-overlooked aspect is the impact of animations and visual transitions on users—especially those with neurological, vestibular, or sensory disorders. Excessive motion can cause discomfort, nausea, or even trigger photosensitive epileptic seizures in some people.

1. Respecting System Preferences with prefers-reduced-motion

Modern operating systems (macOS, Windows, iOS, and Android) allow users to indicate that they prefer reduced motion effects. CSS provides a direct way to respond to this preference via the prefers-reduced-motion media query. This allows developers to adjust the visual experience based on the user’s system settings—without relying on JavaScript or complex detection logic.

• no-preference: the user has not expressed any preference regarding reduced motion.
• reduce: the user requests reduced animations for accessibility reasons.

With this media query, you can design interfaces that are sensitive to everyone’s needs.

2. Enhancing Navigation When No Motion Reduction Is Requested

When the user hasn’t explicitly requested reduced motion, we can assume they’re comfortable with animations. In this case, we enable smooth scrolling on the root element using scroll-behavior: smooth. This improves navigation between sections—especially when using anchors or internal links. It’s a small enhancement that makes movement across the page feel more natural and fluid.

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

3. Prioritizing Accessibility for Motion-Sensitive Users

Conversely, when the user has indicated a preference for reduced motion, we should respond accordingly by disabling the animations we control.

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
    }
}

• *::before and *::after selectors: Includes pseudo-elements, which are often overlooked but commonly used for animations and visual effects.
• animation-duration: 0s: Disables animations by setting their duration to zero. More precise than animation: none, which can break animations that rely on names or timing.
• animation-iteration-count: 1: Limits animations to a single occurrence if they were meant to loop (e.g., infinite loaders).
• scroll-behavior: auto: Disables smooth scrolling, which can cause nausea or disorientation for some users.
• transition-duration: 0s: Reduces CSS transitions to zero without breaking CSS logic (e.g., hover effects still work, but instantly).

4. Why This Matters in Your Web Projects

This kind of setup isn’t just about perfectionism. It’s crucial to make websites and applications accessible to all users—including those who may be physically affected by animations. An inclusive approach not only improves the overall experience, but also demonstrates professional awareness of evolving accessibility standards, in line with regulations such as RGAA (in France) or WCAG (internationally).

Moreover, this is easy to implement. It requires no frameworks, no external libraries, and no significant technical overhead. With just a few lines of CSS, you can drastically improve the experience for a too-often overlooked segment of your audience.