Web Animation · Exercise 1 of 4Next
Beginner
Fade the change, keep a fallback
The button shows and hides the details panel in one frame. Run the change inside document.startViewTransition so the page cross-fades.
Keep the page working when the API is missing (then make the change), and catch ready so a skipped transition leaves no error.
What Check tests
- Clicking still hides the panel
- The change runs as a view transition (the timeline shows the pseudo-element tracks)
- It still works when the browser has no startViewTransition
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.