Web Animation · Exercise 4 of 4 Previous
Intermediate
The border that stops
The button border turns forever on hover. Make it turn twice, also on keyboard focus, and not at all for reduced motion.
What Check tests
- Focus starts the animation
- It runs twice, not forever
- With reduced motion nothing turns
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.