Advanced
A still frame for reduced motion
The headlight always plays its greeting. For visitors who asked for reduced motion it must show frame 30 and never play.
Check matchMedia("(prefers-reduced-motion: reduce)") once the file has loaded. Test with the timeline's Reduced motion switch.
What Check tests
- Normally, the greeting plays
- With reduced motion, it does not play
- With reduced motion, it shows frame 30
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.