Will It Vibe?CSS animation with no prefers-reduced-motion query
Part of Documentation, UX & Accessibility, which counts for 15% of the overall score. When this check fires it deducts 4 points from that category, once per scan, no matter how many places it turns up.
What it detects
A stylesheet defines @keyframes or an animation property but never checks prefers-reduced-motion, so users who have told their OS they get motion sickness or vestibular symptoms from movement get the full animation anyway. Wrap non-essential motion in @media (prefers-reduced-motion: reduce) and turn it off or replace it with a simple opacity/color change. Heuristic: some animations are trivial enough (a small hover tint) that this is a low-severity nudge, not a hard failure; scoped it to CSS only, since this cannot see animation applied purely through inline styles.
Why it matters
CSS animations that never check prefers-reduced-motion play at full strength for users who have explicitly told their operating system that motion causes them discomfort, dizziness, or genuine vestibular symptoms. This setting exists specifically so sites can respect that preference automatically, and skipping it means the people who most need calmer motion get none of the benefit of having set it.
How to fix it
Wrap the animation in @media (prefers-reduced-motion: reduce) and either disable it (animation: none) or swap it for a much shorter, simpler transition (a plain opacity or color change) inside that block. Keep the default, full animation outside the media query unchanged for users who have not set the preference.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo