Web Animation · Exercise 1 of 5Next
Beginner
Slow it down
The box moves 200 px when you press the button, but the move is over in 200 ms, too fast to follow.
Make the move last 600 ms, keeping the linear timing. Then use the timeline: pause, press the button, and step to the middle of the move.
What Check tests
- 300 ms after the click, the box is half way (about 100 px)
- It is a transition of transform lasting 600 ms
- After 600 ms the box has arrived at 200 px
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.