Beginner
Move it the cheap way
This box moves by animating left, which makes the browser lay out the page on every frame (a red track on the timeline).
Make the same move, 150 px to the right in 400 ms with ease-out, by animating transform instead.
What Check tests
- When it moves, nothing costly is animated (no layout or paint)
- It arrives 150 px to the right
- The move 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.