Web Animation · Exercise 1 of 4Next
Intermediate
Make the menu arrive
The menu slides down 16 px and fades in over 300 ms, but it uses linear and feels like it waits before it moves.
Keep the 300 ms and change only the easing to Lumen's strong ease-out, cubic-bezier(0.22, 1, 0.36, 1), so the menu is most of the way there after 100 ms.
What Check tests
- 100 ms after opening, the menu has covered more than 60% of its slide
- It still takes 300 ms
- After 300 ms it is fully open
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.