Does your CSS turn off animations when a user - or AI agent - asks for reduced motion?
Respecting prefers-reduced-motion speeds up AI agents and prevents motion-sickness for sensitive users.
What this signal tests
We check whether your CSS includes an @media (prefers-reduced-motion: reduce) block that disables or shortens animations and transitions. This media query fires when the user (or an AI agent driving the browser) has set a system preference for less motion. The block typically zeros out animation-duration and transition-duration so the page settles instantly instead of animating.
Why it matters for your visibility in AI
AI agents driving headless browsers - Claude for Chrome, ChatGPT Atlas, OpenAI Operator - frequently configure prefers-reduced-motion: reduce as a default. They do this for two reasons: animations slow down each action by hundreds of milliseconds, and animations make DOM snapshots flaky because elements are mid-transition when the agent reads them. A site that ignores the preference forces the agent to wait, retry, or fail when it cannot find the element it expects. The same media query also serves real users with vestibular disorders or motion sensitivity, where parallax scrolling and sliding modals can trigger nausea or dizziness. The fix is one CSS block that benefits both groups simultaneously.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| No animations OR @media (prefers-reduced-motion: reduce) block exists. |
How we test it
We scan your linked stylesheets for any animation or transition declarations. If the page uses neither, the signal passes by default - there is nothing to disable. If animations or transitions exist, we then look for an @media (prefers-reduced-motion: reduce) block that overrides them by shortening durations or setting animation: none. The presence of either an animation-free design or a working override is required to pass.
Show technical detection method
If page uses animation/transition declarations, scan stylesheets for @media (prefers-reduced-motion: reduce) overrides.
If your site fails: how to fix it
- Add a reduced-motion media query at the end of your main stylesheet: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
- If you use a CSS framework (Tailwind, Bootstrap, Material), check the documentation - most modern versions support a reduced-motion variant or utility class out of the box.
- For JavaScript-driven animations (Framer Motion, GSAP, Lottie), use the framework's built-in detection (e.g., useReducedMotion hook in Framer Motion) to disable animations programmatically.
- Test by enabling Reduce Motion in your operating system (macOS: Accessibility > Display; Windows: Settings > Accessibility > Visual effects) and confirming animations stop on your site.
- Re-run the AI Ready Test to confirm the override block is detected.
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | low |
| Category | Performance |
Primary sources
Related signals
No related signals listed.
Frequently asked questions
Will this break my existing design?
No, because the override only fires for users who opted in to reduced motion. Everyone else continues to see your animations as designed. The change is opt-in by the user, not a global removal.
Do I need to disable every animation?
Not necessarily. The accessible pattern is to shorten or replace dramatic motion (large slides, parallax, autoplay video) while leaving subtle UI feedback (button states, focus rings) intact. The goal is to reduce vestibular triggers, not strip all transitions.
What if I do not use any animations?
Then the signal passes by default - there is nothing to override. The check only fails when your CSS includes animations or transitions but no reduced-motion block to mitigate them.
Does this affect accessibility compliance?
Yes. WCAG 2.2 Success Criterion 2.3.3 (Animation from Interactions) at Level AAA requires this behaviour. While not a strict AA requirement, it is widely considered a baseline expectation for accessible modern sites.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.