Web Animation · Exercise 1 of 4Next
Intermediate
Swap the travel for a fade
The card slides in from the left. For reduced-motion users it must only fade: no movement, and the fade must still run.
Add the media query. Test it with the timeline's Reduced motion switch.
What Check tests
- Normally the card slides
- With reduced motion nothing moves
- With reduced motion the fade still runs
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.