Skip to content

Motion & Animation Checker

Paste CSS or HTML to detect animations, transitions, and auto-playing content. Check for prefers-reduced-motion coverage and get CSS fix snippets.

FreeNo SignupNo Server UploadsZero Tracking

We fetch the page client-side. Some sites may block external access — use "Paste HTML" as a fallback.

Enter a URL or paste CSS/HTML above to check for motion and animation accessibility.
Embed code
<iframe src="https://wcagkit.com/embed/motion-checker" width="100%" height="600" frameborder="0" title="Motion & Animation Checker - wcagkit"></iframe>
<p style="font-size:12px;text-align:center;margin-top:4px;">
  <a href="https://wcagkit.com/tools/motion-checker" target="_blank" rel="noopener">Powered by wcagkit</a>
</p>
Attribution preview

Powered by wcagkit

How to Use Motion & Animation Checker

  1. 1

    Paste your CSS or HTML

    Copy your CSS stylesheet or HTML with inline styles and paste it into the input area.

  2. 2

    Click Analyze

    Press the Analyze button to detect all animations, transitions, and motion-related properties.

  3. 3

    Review findings

    See which animations have prefers-reduced-motion alternatives and which ones do not.

  4. 4

    Apply fix snippets

    Copy the generated CSS fix snippets to add prefers-reduced-motion support to your stylesheets.

Frequently Asked Questions

prefers-reduced-motion is a CSS media query that detects whether the user has requested reduced motion in their operating system settings. When set to 'reduce', it indicates the user prefers minimal motion, often due to vestibular disorders, motion sensitivity, or personal preference. Websites should respond by disabling or reducing animations and transitions.

WCAG 2.3.3 (Animation from Interactions) at Level AAA requires motion animation triggered by interaction to be disablable unless essential. WCAG 2.2.2 (Pause, Stop, Hide) requires auto-playing content to be pausable. WCAG 2.3.1 (Three Flashes) prohibits content that flashes more than three times per second. The prefers-reduced-motion media query is the standard implementation approach.

Parallax scrolling, large-scale animations, auto-playing videos, sliding or zooming transitions, infinite loading animations, and content that moves when the user scrolls can all trigger vestibular disorders, motion sickness, or seizures in sensitive users. Even subtle animations can be problematic when they are persistent or cover large areas of the screen.

Not necessarily. The goal is to reduce motion, not eliminate all visual feedback. Simple opacity fades and color changes are generally safe. The key is to remove or reduce motion that involves spatial movement, scaling, rotation, or rapid visual changes. A common approach is to set animation-duration and transition-duration to near-zero values.

No. All analysis is performed entirely in your browser using JavaScript. Your CSS and HTML code never leaves your device.

Related Tools

Color Contrast Checker

Check color contrast ratios

Try it

Color Blind Simulator

Test for color blindness

Try it

Site Checker

Full accessibility check

Try it

ARIA Validator

Validate ARIA attributes

Try it

Motion Accessibility and the Vestibular System

Approximately 35% of adults over 40 have experienced some form of vestibular dysfunction. The vestibular system in the inner ear helps the brain process motion and spatial orientation. When websites display unexpected or excessive motion, users with vestibular disorders can experience dizziness, nausea, headaches, and disorientation. The prefers-reduced-motion media query was specifically designed to address this, allowing websites to adapt their behavior to user preferences.

Types of Problematic Motion

Parallax scrolling, where background and foreground content move at different speeds, is one of the most commonly reported triggers. Large-scale page transitions that slide, zoom, or rotate entire content areas can be equally problematic. Auto-playing video backgrounds, infinite animation loops, and content that moves in response to scroll position all contribute to motion-related accessibility barriers. Even decorative animations can become problematic when they persist across the entire user session.

Implementing prefers-reduced-motion

The standard approach is to add a CSS media query that disables or reduces motion when the user has opted for reduced motion in their OS settings. A common global reset sets animation-duration and transition-duration to near-zero values within the media query. This approach ensures all animations are effectively disabled without requiring changes to individual animation declarations. For more nuanced control, you can override specific animations with reduced-motion alternatives that use opacity changes instead of spatial movement.

Beyond CSS: JavaScript-Driven Animations

CSS media queries only affect CSS animations and transitions. JavaScript-driven animations using requestAnimationFrame, Web Animations API, or animation libraries require checking the media query programmatically using window.matchMedia('(prefers-reduced-motion: reduce)'). Add an event listener for changes to this media query to respond dynamically when users toggle their system preference. Animation libraries like Framer Motion and GSAP offer built-in reduced-motion support.