Web Animation · Exercise 1 of 4Next
Intermediate
Fill the bar the cheap way
The progress bar fills by animating width, which lays out the page on every frame (red on the timeline).
Make it fill in 400 ms with ease-out by animating transform: scaleX(...) instead. The bar must still end at 200 px wide.
What Check tests
- While it fills, nothing costly is animated
- At 200 ms it is part-way (between 30% and 99%)
- At the end it covers the whole 200 px track
- It still takes 400 ms
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.