Ask any question about CSS here... and get an instant response.

How can I ensure my animations respect the user's prefers-reduced-motion setting?

Asked on Nov 20, 2025

Answer

To ensure your animations respect the user's "prefers-reduced-motion" setting, you can use a CSS media query to detect this preference and adjust or disable animations accordingly.

<!-- BEGIN COPY / PASTE -->
    .animated-element {
      animation: slide-in 2s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
      .animated-element {
        animation: none;
      }
    }

    @keyframes slide-in {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }
    <!-- END COPY / PASTE -->

Additional Comment:

The "prefers-reduced-motion" media query checks if the user has requested reduced motion in their system settings.
When the preference is detected, animations can be disabled by setting them to "none".
This approach enhances accessibility by respecting user preferences for reduced motion.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I ensure my animations respect the user's prefers-reduced-motion setting?

Asked on Nov 20, 2025

Answer

The Q&A Network