Designers
ToolsDocsProAll the Possibles

All 141 tools / Motion

Find animations in your CSS that force layout, ignore reduced motion or run forever without a pause

Motion CSS auditFreeFor developers and designers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

@keyframes pulse { from { opacity: 1 } to { opacity: .2 } }
.dot { animation: pulse 200ms ease-in-out infinite alternate; }
.panel { transition: all 300ms ease; }
.drawer { transition: width .5s, transform .3s; }
@keyframes slide { from { left: 0 } to { left: 200px } }
.toast { animation: slide 400ms ease-out; }

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Motion audit: 2 keyframes, 2 animations (1 infinite), 3 transitions, 0 reduced-motion block(s).

- [high] No @media (prefers-reduced-motion: reduce) block found, but 4 selector(s) animate or transition. People with vestibular disorders can be made ill by large motion (WCAG 2.3.3 AAA; broadly expected practice). Fix: Add @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important } } or, better, remove movement and keep fades.
- [medium] @keyframes slide animates layout properties (left). Each frame re-runs layout and can drop frames on weak devices. (@keyframes slide) Fix: Animate transform (translate, scale) and opacity instead; they can run on the compositor.
- [medium] transition: all on .panel animates every property that changes, including layout ones, and picks up changes you did not plan. (.panel) Fix: List the exact properties (transform, opacity).
- [medium] .drawer transitions width, a layout property. (.drawer) Fix: Transition transform or opacity, or use grid-template-rows 0fr to 1fr for height reveals.
... full output on the tool page

What you get

Findings on layout properties, transition: all, missing reduced-motion rules and endless loops

What it cannot do

Reads pasted CSS only; flash rates are checked only if you supply the figures you measured.

Who it is for

  • Developers
  • Designers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called audit_motion_css. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/motion-audit-css -H 'content-type: application/json' -d '{"css":"@keyframes pulse { from { opacity: 1 } to { opacity: .2 } }\n.dot { animation: pulse 200ms ease-in-out infinite alternate; }\n.panel { transition: all 300ms ease; }\n.drawer { transition: width .5s, transform .3s; }\n@keyframes slide { from { left: 0 } to { left: 200px } }\n.toast { animation: slide 400ms ease-out; }","flashes_per_second":"","flash_area_percent":""}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in motion

All motion tools