Web Animation · Exercise 5 of 5 Previous
Beginner
Define the motion tokens (launch site)
Part of the launch site: tokens.css. The button's transition uses var(--dur-base) and var(--ease-out), but the tokens are missing, so nothing animates.
Define all six tokens in :root: --dur-fast: 120ms, --dur-base: 220ms, --dur-slow: 400ms, --ease-out: cubic-bezier(0.22, 1, 0.36, 1), --ease-in: cubic-bezier(0.55, 0, 1, 0.45), --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1).
What Check tests
- The three durations are defined
- The three easings are defined
- The button now transitions in 220 ms with the ease-out token
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.