Intermediate
A pop that settles
The new-item badge grows from scale(0.6) to scale(1) in 400 ms with ease-out. Give it a small overshoot: it must grow past 1.02 (but not past 1.1), then settle at exactly 1 by 400 ms.
Use a cubic-bezier() with a y above 1.
What Check tests
- The badge grows past 1.02 and stays below 1.1
- It settles at exactly 1
- Only transform is animated
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.