ClientSideTools Privacy-First Browser Tools

prefers-reduced-motion CSS Transition Auditor

Detect CSS motion effects and find missing or incomplete prefers-reduced-motion fallbacks.

Web Accessibility Local processing Pasted CSS is analyzed locally.

Auditor

Audit results

Paste CSS and run the reduced-motion audit.

Motion rules detected

    Reduced-motion overrides detected

      Introduction

      Motion can improve an interface when used carefully, but it can also cause discomfort, distraction, or accessibility barriers. The CSS prefers-reduced-motion media query lets you reduce or remove motion for users who request it.

      This tool helps you find motion-related CSS and identify whether reduced-motion fallbacks are present.

      How it works

      The tool parses pasted CSS using the browser’s CSS parser where available. It identifies motion-related declarations, then checks whether a prefers-reduced-motion: reduce block contains relevant overrides.

      • CSS is parsed locally.
      • Pasted CSS is not inserted into the live page.
      • Selector matching is heuristic and based on selector text.
      • JavaScript-driven animations are not detected unless expressed in CSS.

      How to use

      1. Paste your CSS.
      2. Click Audit CSS.
      3. Review detected motion rules.
      4. Review reduced-motion overrides.
      5. Copy the recommended snippet if coverage is missing.

      Practical example

      A button transition, an infinite hero animation, and smooth scrolling may all need reduced-motion handling: 

      .button {
  transition: transform 200ms ease;
}

.hero {
  animation: fade-slide 800ms ease infinite;
}

html {
  scroll-behavior: smooth;
}

      Use cases

      • Auditing a stylesheet before release.
      • Checking whether reduced-motion support was accidentally removed.
      • Reviewing design-system motion tokens.
      • Preparing accessibility documentation.
      • Finding infinite animations that may need special handling.

      Best practices

      • Provide reduced-motion alternatives for non-essential motion.
      • Preserve essential state changes where possible.
      • Disable or reduce parallax, autoplaying motion, and large animations.
      • Set scroll-behavior: auto under reduced motion.
      • Test with the operating system reduced-motion setting enabled.

      Common mistakes

      • Adding a reduced-motion block that does not override any motion properties.
      • Disabling all motion without preserving usability.
      • Forgetting smooth scrolling.
      • Only handling animations but not transitions.
      • Assuming opacity fades are always harmless.

      Limitations

      • Selector coverage is heuristic.
      • JavaScript animation libraries are not analyzed.
      • Complex media query nesting may require manual review.
      • The tool does not judge whether a motion effect is essential.

      Browser compatibility

      The tool works in current versions of major browsers. The prefers-reduced-motion media query itself is widely supported.

      FAQ

      Is my CSS uploaded?

      No. The CSS is parsed and analyzed locally in your browser.

      Does it execute my CSS?

      No. Pasted CSS is not applied to the live page.

      Should I disable all motion for reduced motion users?

      Often yes for decorative motion, but preserve subtle state feedback where needed. The goal is comfort and usability, not necessarily removing every visual change.

      Does this prove WCAG compliance?

      No. It helps identify missing reduced-motion handling, but full accessibility conformance requires broader testing.

      References

      Version and changelog

      • Version: 1.0.0
      • Last updated: August 8, 2026
      • Changelog: Initial production release.