Web Animation · Exercise 1 of 4Next
Beginner
Add a hover transition
The pill turns orange when it has the class hot (and on hover), but it changes in one frame.
Make its background and its text colour change over 160 ms with ease-out, in both directions. Both properties must move together, so the label stays readable.
What Check tests
- 80 ms after the change the background is part-way to orange
- At the same moment the text colour is part-way too
- Two transitions of 160 ms, and the end colour is orange
- It also fades back when the class is removed
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.