HTML & CSS Interview Question #111

What is prefers-reduced-motion and why is it important?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

prefers-reduced-motion lets CSS detect a user preference for reducing non-essential motion. This is important because large, continuous, or unexpected animations can cause discomfort for some users.

Detailed Explanation

prefers-reduced-motion lets CSS detect a user preference for reducing non-essential motion. This is important because large, continuous, or unexpected animations can cause discomfort for some users.

Applications should reduce or remove decorative motion when requested while preserving essential state changes and usability. The exact alternative depends on the interface rather than always disabling every transition.

Code Example

.panel {
    transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .panel {
        transition: none;
    }
}