Web Animation · Exercise 1 of 5Next
Beginner
A press that answers in 120 ms
The Reserve button gives no feedback when pressed. Add a .pressed animation: the button dips to 94% and returns, in 120 ms or less, with ease-out, animating only transform.
For people who asked for reduced motion, the button must not scale.
What Check tests
- Pressing starts a transform animation of 120 ms or less
- At 50 ms the button is smaller
- It is back to full size after 130 ms
- With reduced motion, the button does not scale
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.