Web Animation · Exercise 4 of 4 Previous
Advanced
Calm for Ravi
The box slides 180 px and fades in. Make it follow the device's reduced-motion setting: with reduced motion it must not slide, but it must still fade.
What Check tests
- With normal motion the box is still sliding at 100 ms
- As a reduced-motion user it is at its place at once
- As a reduced-motion user it still fades
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.