Intermediate
A calm version for reduced motion
The filters panel slides down 20 px while it fades in. Add a rule so that for a visitor who asked for reduced motion it only fades.
The two checks marked reduced run the page a second time as a reduced-motion visitor.
What Check tests
- Normally the panel slides: at 100 ms it is part-way up
- With reduced motion it does not move at all
- With reduced motion it still fades in
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.