Intermediate
Fade out, then leave the layout
The Filters panel is display: none when closed. It appears and disappears in one frame.
Make it fade in and out over 250 ms with ease-out, and make it leave the layout only when the fade out has finished. You need display with allow-discrete and @starting-style.
What Check tests
- Opening: 100 ms in, the panel is shown and part-way visible
- After 250 ms it is fully visible
- Closing: 100 ms in, it is still in the layout and part-way faded
- After the fade it has left the layout
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.