Auto-playing animation must be pausable
Rule
infinite-animation· Deeper checks · impact moderate · Live only (static → incomplete)
Why it matters
A CSS animation with animation-iteration-count: infinite starts automatically and never stops. Moving content that lasts more than 5 seconds must offer a way to pause, stop, or hide it — it distracts users with attention or vestibular disorders, and screen-magnifier users can lose their place. The engine reads the real computed style of the live page, so finished one-shot entry animations are never flagged; on live scans it also re-checks the page with prefers-reduced-motion: reduce emulated and passes animation that is verified to stop (or become imperceptible) there — gating decorative motion behind the media query resolves this finding.
How to fix
Give long-running animation a visible pause/stop control, or stop it after a few cycles. Wrap decorative motion in @media (prefers-reduced-motion: no-preference) so users who opted out of motion never see it — live scans verify that gating with an emulated reduced-motion pass and clear the finding.
Example
<div style="width:200px;height:80px;animation: pulse 2s infinite">Limited offer!</div>
<div style="width:200px;height:80px;animation: fade-in 0.5s 1">Limited offer!</div>
Example
@keyframes pulse{50%{opacity:.4}} .promo{animation: pulse 2s infinite}
@media (prefers-reduced-motion: no-preference){ .promo{animation: pulse 2s infinite} }
The reduced-motion probe confirms the gated animation stops under prefers-reduced-motion: reduce, so it passes.
WCAG success criteria
2.2.2 Pause, Stop, Hide — Level A
Moving, auto-updating or auto-playing content (e.g. carousels) that starts automatically and lasts more than 5s must offer a way to pause, stop, or hide it.
Standards
This rule contributes to the following standards:
WCAG A EN 301 549 Section 508 Trusted Tester
| Standard | Criteria |
|---|---|
| Section 508 | 1194.22(j) |
| EN 301 549 | 9.2.2.2 |
| Trusted Tester v5 | 2.b |