Web Animation · Exercise 1 of 4Next
Beginner
Bump the count
Pressing Add changes the number, but you cannot see it change. Make the number bump: scale from 1 to 1.4 and back to 1 over 250 ms with ease-out, using animate().
Pause, press Add, and step through the first 250 ms: the number grows, then shrinks. Then press Add twice quickly: both bumps must play and nothing may stay scaled.
What Check tests
- Pressing Add starts a Web Animations API animation on the number
- During the bump the number reaches scale 1.4
- After 300 ms the number is back to scale 1 and the animation has finished
- Two quick presses: both play, the number reads 3 and nothing stays scaled
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.