Command Palette

Search for a command to run...

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

Tick the clock

The clock hand turns smoothly. Make it tick: it should jump 30° once every second, one full turn every 12 seconds, starting at 0°.

Only the timing function should change.

What Check tests

  1. At 0.9 s the hand is still at 0°
  2. At 1.1 s it has jumped to 30°
  3. It never shows a value between two ticks

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.