Intermediate
Fade cards in as they arrive
Make each card fade in and rise 24 px while it enters the box, finishing when fully inside: a view() timeline over entry, with opacity and transform only. With reduced motion the cards must simply be visible, with no animation.
What Check tests
- A card below the box starts hidden
- Half way in, a card is part-way visible
- A card fully inside is fully visible
- Only cheap properties are animated
- With reduced motion the cards are visible and nothing 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.