Intermediate
Make the card travel
The card jumps between two boxes with a cross-fade. Give it a view-transition-name of volt so it moves from one box to the other.
Make the morph last 500 ms with a rule for ::view-transition-group(volt).
What Check tests
- The card has the name volt
- A group for volt animates
- The morph lasts 500 ms
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.