Web Animation · Exercise 1 of 4Next
Advanced
Round 1: the toast
A timed round. showToast() adds a message, but nothing moves and the message never leaves.
Make the toast fade and rise in over about 220 ms and, two seconds later, fade out and remove itself. For a reduced-motion visitor the toast fades but does not move. Talk through your choices as you build, as you would in the interview.
What Check tests
- 60 ms after the click the toast is part way in
- It has landed after 300 ms, in place
- Two quick clicks give two toasts
- Both leave, and nothing is left running
- Reduced motion: it fades but does not move
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.