Web Animation · Exercise 1 of 4Next
Intermediate
Name the toast's motion by purpose
The toast's rule has 220ms ease-out typed into it. Add the purpose tokens --motion-enter-duration and --motion-enter-ease, pointing at the primitives --dur-base and --ease-out, and make the toast use them.
Then change --dur-base on the root and check that the toast follows.
What Check tests
- --motion-enter-duration and --motion-enter-ease exist and point at the primitives
- The toast takes 220 ms to arrive
- The toast's own rule has no hard-coded time
- Changing --dur-base to 500ms reaches 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.
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.