Command Palette

Search for a command to run...

Hectal
Phase 4: Transforms and Keyframe Animations
Web Animation · Exercise 1 of 5Next
Beginner

Right, then turned

When you press Go, the box should end 100 px to the right of where it started, turned 90°. It currently ends up lower down as well.

Fix the order of the transform functions. Keep one transform property.

What Check tests

  1. It ends 100 px to the right and no lower
  2. It is turned 90°
  3. It is still one transform transition of 600 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.
00:00.000
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.