Intermediate
Open a will-change window
The card keeps will-change: transform in the stylesheet, so it holds a layer for ever. Remove it from the CSS.
Set will-change: transform in the click handler, start the lift two frames later, and clear will-change when the transition ends.
What Check tests
- At rest the card has no will-change
- Right after the click, will-change is transform
- The card lifts by 12 px
- When the transition has ended, will-change is gone
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.