Beginner
Name the properties
The card uses transition: all 300ms. A script that sets its width makes it grow in a slow, costly layout animation, which nobody asked for.
Change the transition so that only transform (200 ms) and background-color (200 ms) animate. The width must snap.
What Check tests
- The hover state animates transform and background-color, 200 ms each
- Setting the width starts no transition
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.