Web Animation · Exercise 5 of 5 Previous
Intermediate
The logo draws once (launch page)
Part of the launch page: the header logo is a ring and a bolt, each one dash as long as its path. Make the ring draw in 700 ms, then the bolt in 500 ms after a 350 ms delay, once, on load, with ease-out.
With reduced motion nothing draws. The finished logo is the resting state and the link keeps its name.
What Check tests
- The ring and the bolt each draw stroke-dashoffset
- The bolt starts after the ring
- Without the animations the finished logo shows
- With reduced motion nothing draws and the link keeps its name
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.