Skip to content
MotionSpec
Free · no signup · nothing stored

What is moving on your client’s website?

Paste a live URL to check its CSS motion. See the candidates, affected selectors and suggested fixes your team can review.

Free CSS motion check · No signup · No automatic changes to your site.

See every motion candidate we can spot in your CSS — free.

The free motion check scans your linked CSS against WCAG 2.2.2 (Pause, Stop, Hide — Level A) and WCAG 2.3.3, and shows every CSS-motion candidate it flags with a copy-paste fix. Want it dated, cited and benchmarked against the 186 AI-built apps we could measure (September 2026 method)? The $29 Motion Report is refundable within 14 days, no questions.

A detection check — we find and show the issues; we never promise to make your site compliant.

Honest scope: static scan of linked CSS + <style> only. Not a full accessibility audit, not a compliance verdict; runtime JS/GSAP motion isn’t covered. Nothing you submit is stored. Findings are grouped by root cause; the score (v2) weighs distinct causes — log‑dampened by occurrences — not the raw finding count.

What this motion accessibility checker looks at

The checker is a static scan. It fetches the page you paste, follows its <link rel="stylesheet"> references (up to 20 stylesheets, 2 MB and 8 seconds each) and reads the inline <style> blocks. It then walks every animation and transition declaration it finds and asks four questions. The four checks are the whole engine — the same MIT code that runs in npx motionspec, in the hosted MCP tool motion_audit and in the $29 Motion Report.

  1. Motion outside a reduced-motion guard. An animation or transition declared outside a @media (prefers-reduced-motion) block keeps moving for a visitor whose operating system asks for less motion. Mapped to WCAG 2.3.3 Animation from Interactions (Level AAA) and the prefers-reduced-motion best practice — a robustness gap, not a Level A failure. This is the prefers-reduced-motion tester half of the tool.
  2. Transitions on properties other than transform or opacity. Animating background, width, top or box-shadow forces layout and paint work and moves more of the screen than a compositor-safe property would. Reported as a best-practice candidate in the 2.3.3 lane. Only transition lists are inspected here, never the bodies of @keyframes blocks.
  3. Infinite animation without a pause path. animation-iteration-count: infinite with no animation-play-state rule and no data-*paus* toggle in the same stylesheet is motion the visitor cannot stop. Mapped to WCAG 2.2.2 Pause, Stop, Hide — Level A, the criterion most often missed by AI-generated UIs. This is the WCAG 2.2.2 checker half of the tool.
  4. Marquees and long auto-play. The deprecated <marquee> element, and any CSS animation that runs longer than five seconds without a pause path, fall under the same Level A criterion.

Findings are grouped by root cause: one @keyframes animation applied to nine selectors is one candidate with nine occurrences, not nine candidates. Each candidate names the selectors, the WCAG criterion, the root cause and a copy-paste fix. Across 196 AI-generated production apps we measured in July 2026 and re-measured with our September 2026 method (192 still online), 65.1% of 186 measurable apps ran a loop that could not be paused and 96.8% shipped without a reduced-motion guard; 2 of 186 measurable apps (1.1%) came back clean on these four checks. The study and its open dataset are public.

What it cannot see — and says so

A static CSS scan has edges, and the result card names them instead of hiding them. The checker does not evaluate:

  • Inline style="" attributes, @imported stylesheets and CSS-in-JS that only exists after a script has run.
  • JavaScript motion: GSAP, the Web Animations API (Element.animate()), Framer Motion, requestAnimationFrame loops and scroll libraries. The scan looks for these names in the page HTML and, when it sees them, discloses “runtime motion detected — not audited”. A library loaded from an external bundle without any trace in the HTML produces no disclosure at all, so a clean result on a GSAP-heavy site is a lower bound, not a verdict.
  • Auto-playing <video>, animated GIFs, canvas and WebGL scenes, SVG SMIL, Lottie and Rive players, View Transitions and CSS scroll-driven animations.
  • Flashing content (WCAG 2.3.1 Three Flashes or Below Threshold). No part of the engine measures flash frequency or area.
  • Anything behind a login, a cookie wall or client-side routing, and everything outside motion — this is not a general accessibility audit and not an EN 301 549 assessment.

If you need those covered, pair the checker with a browser-based runtime tool or a manual review; the comparison page shows what each of the common tools does and does not measure.

Three findings from a real report

These come from the published example report — a scan of our own /before-after demo page, which deliberately ships the mistakes the checker exists to catch. The page scored 26/100 with 13 root causes.

WCAG 2.2.2 · Level A · High Infinite animation without pause path — root cause keyframes:logosway, selector .wavemark, score impact −20

A logo that sways forever and offers no way to stop it. Fix: give the page one pause control and let it reach the animation.

html[data-ms-paused] .wavemark { animation-play-state: paused !important; }  /* + a visible pause button */
WCAG 2.3.3 · reduced-motion best practice · Medium Transitions without prefers-reduced-motion guard — root cause transition:(unguarded), selectors .slider and .slider::before, 2 occurrences, score impact −11.2

Two transitions that keep animating for a visitor who asked for less motion. Fix: wrap the transition layer, or switch it off under the media query.

@media (prefers-reduced-motion: reduce) { .slider, .slider::before { transition: none; } }
Best practice · compositor-safe · Low Animated non-transform/opacity property: background — root cause props:background, selector .slider, score impact −4

A background colour that animates on every frame — paint work the compositor cannot skip, and more of the screen in motion than the effect needs. Fix: animate transform or opacity instead.

.slider { transition: transform .3s ease, opacity .3s ease; }  /* not background */

How the score works — and why the CLI can show a different number

The score starts at 100. Each root-cause group subtracts a severity weight (an unpausable loop weighs more than an unguarded fade), dampened by the logarithm of its occurrence count so that one pattern repeated on forty selectors does not zero the page on its own; per-category caps keep any single issue class from doing so either. That is scoring v2, and it is what this page and the Motion Report use. The MIT command line (npx motionspec audit, v1.2.7) and the MCP tools still report scoring v1, a flat deduction per finding — the same findings, a different weighting, so the same URL can show two numbers today. A unified score is planned; until then the findings, not the number, are the thing to compare.

Questions people ask before they paste a URL

Is this a prefers-reduced-motion tester?

For CSS, yes. The checker reads every animation and transition declaration in the page's linked and inline CSS and reports the ones that sit outside a prefers-reduced-motion guard. It does not emulate the OS setting in a browser, so JavaScript that ignores matchMedia('(prefers-reduced-motion: reduce)') is disclosed as not audited rather than tested.

Does it check WCAG 2.2.2 (Pause, Stop, Hide)?

It checks the part a static scan can see: CSS animations that loop (infinite) or run longer than five seconds without a detectable pause path — an animation-play-state rule or a data-*paus* toggle in the same stylesheet — and the deprecated <marquee> element. Auto-playing video, GIFs and JavaScript-driven loops are outside its view and are listed as not audited.

Is a score of 100 a WCAG pass?

No. 100 means the four static checks found no candidate in the CSS the scan could reach. It is a lower bound, not a certificate: runtime motion, media and anything behind a login are not in it. A clean result with CSS motion present earns a badge that re-runs the check live on click, so the evidence is the reproduction, not a stored seal; pages without any CSS motion are reported as not measurable, not as clean.

What happens to the URL I paste?

The page and up to 20 linked stylesheets (2 MB and 8 seconds each) are fetched, scanned in memory and discarded. Nothing you submit is stored; an aggregate counter of checks run is the only record. The same applies to the WebMCP tool this form exposes to agent-capable browsers.

Free check, Motion Report or npx motionspec audit — which one when?

The free check is the pre-flight. The $29 Motion Report is the same scan as a dated document with a report ID, WCAG citations and the benchmark against the 196-page study — in your browser, printable to PDF. The MIT package runs the same four checks on your own machine (npx motionspec, or motion audit <url> from the CLI). The website reports scoring v2, the CLI and the MCP tools still report scoring v1 — same findings, different weighting, so the number can differ on the same URL. A unified score is planned.

Want the background? Read What is motion slop? and the step-by-step guide How to verify web motion accessibility — or see what MotionSpec does about it.

Next: plans & pricing · the Agency plan for client portfolios · try the free MCP · before/after demo · how it compares to other checkers