Build Accessible Animations with `prefers-reduced-motion`
prefers-reduced-motion lets you respect a user's system-wide request to minimize animations. Use this CSS media query to replace potentially jarring effects like zooms or parallax with simpler fades, preventing discomfort for users with vestibular disorders.
Why it exists
Some animations are not just decorative; they can be physically harmful. Large-scale motion, zooming, and parallax effects can trigger nausea, dizziness, and headaches in people with vestibular disorders. The prefers-reduced-motion feature was created to give users control over their experience and developers a standard way to respect that choice.
The mental model
Think of it as a contract with the user. The user signals a preference through their operating system accessibility settings, saying, "I prefer less motion." Your website then uses this media query to listen and honor that request. It's a simple, binary check: does the user want reduced motion? If yes, you provide a calmer experience.
How it works
It is a CSS media feature that you use inside a media query. The syntax is @media (prefers-reduced-motion: reduce) { ... }. Any CSS rules inside this block will only apply if the user has enabled the reduced motion setting. The shorthand @media (prefers-reduced-motion) is equivalent to checking for the reduce value. The default state, when the user has not enabled the setting, is no-preference.
When to use it
Use it to disable or replace any non-essential, large-scale, or surprising animations. This is critical for three main types of motion: first, parallax scrolling effects; second, animations that zoom or pan across a large area; and third, complex transitions between different UI states. A good practice is to define animations by default, then override or disable them within the prefers-reduced-motion block.
When not to use it
Avoid disabling all motion indiscriminately. Subtle transitions, like a gentle cross-fade or a color change on a button, are often still necessary to communicate state changes and provide feedback. The goal is to eliminate vestibular triggers, not to create a completely static page. Focus on reducing large, fast, or unexpected movements.
One canonical example
Imagine a notification that slides in from the side of the screen. For a user with prefers-reduced-motion, you can replace this movement with a simple fade. Your default CSS might have animation: slide-in 0.5s;. Inside @media (prefers-reduced-motion: reduce), you would override this with a safer alternative like animation: fade-in 0.5s; or disable it entirely with animation: none;.
Interview question
When applying prefers-reduced-motion, which type of animation is generally recommended to be kept, rather than disabled or significantly altered?
- a.Parallax scrolling effects where background elements move at different rates.
- b.Complex transitions between distinct UI states, like a full-page overlay appearing.
- c.Subtle visual feedback, such as a button's color changing on hover or focus.Correct
- d.Animations that involve large-scale zooming or panning across the screen.
Why? this is the answer
The card explicitly states that "Subtle transitions, like a gentle cross-fade or a color change on a button, are often still necessary to communicate state changes and provide feedback," making them suitable to keep. In contrast, large-scale, surprising, or complex animations (like those in options A, B, and D) are the primary targets for reduction due to their potential to cause discomfort.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles