Web Animation · Exercise 4 of 4 Previous
Advanced
Keep the change, drop the transition
withTransition already handles a missing API. Add the second guard: when the visitor prefers reduced motion (prefers-reduced-motion: reduce), run the update directly with no transition.
The state must still change in both cases.
What Check tests
- Normal motion: the swap runs as a view transition
- The box changed
- Reduced motion: no transition, but the box still changes
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.