Beginner
Write the keyframes
The badge should pop in when you press Show: it grows from 60% to 108% and settles at 100%, fading in at the same time, over 300 ms with ease-out.
The class already asks for an animation called pop. Write the @keyframes pop.
What Check tests
- Pressing Show starts an animation named pop
- At 60% (180 ms) it is a little larger than normal
- At the end it is fully visible at its normal size
- Only cheap properties are 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.