tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
odin-default-css-exercises/animation/03-dropdown-menu
History
zhna123 84e732112c Changed to use word expand to describe menu animations 2023-04-20 21:04:32 -04:00
..
solution Changed to use word expand to describe menu animations 2023-04-20 21:04:32 -04:00
README.md Changed to use word expand to describe menu animations 2023-04-20 21:04:32 -04:00
desired-outcome.gif added animation - keyframe at rule exercise 2023-04-18 11:26:21 -04:00
index.html added animation - keyframe at rule exercise 2023-04-18 11:26:21 -04:00
script.js added animation - keyframe at rule exercise 2023-04-18 11:26:21 -04:00
style.css added animation - keyframe at rule exercise 2023-04-18 11:26:21 -04:00

README.md

Dropdown Menu

We've set up a dropdown menu in this exercise. Load up the page, you can see a single menu title, with a dropdown menu that will open upon clicking on the title.

Your task is to add animation to the dropdown menu so that it will have an effect of expanding. Check out the desired outcome below, and notice the bounce illusion when the dropdown expands close to its final end state.

Hints

  • You need to specify a transform-origin property to make the dropdown menu start transforming from the top
  • You need to add an intermediate step to the keyframe at rule to implement the bounce illusion.

Desired Outcome

outcome

Self Check

  • The dropdown menu expands after you click on the menu title
  • There's a bounce illusion towards the end of the animation