CSS · Exercise 5 of 5 Previous
Advanced
A toast that slides in and out
Build a toast notification. When the page loads it should slide in with a keyframe animation (from below, fading in) that starts after a short delay, with no flash before it starts.
When the Close button is clicked, play a fade-out animation (0.5s or shorter), and only after it ends remove the toast from the page in JavaScript.
Use transform/translate and opacity only, so both animations are cheap.
What Check tests
- The toast has an entry animation with a delay
- No flash before the entry animation starts
- The keyframes only use transform/translate and opacity
- Close plays an exit animation, then removes the toast
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.
Console
Nothing logged yet.