So far, our animation could just as easily have been done with a transition, as nothing new has really been introduced. But the power of animation comes where we can set additional keyframes. Let's change from and to in our CSS to 0% and 100%, respectively, like so:
@keyframes slideDown { 0% {transform: translateY(-100%);} 100% {transform: translateY(0%);}}
Instead of adding just a start and an end, we can add any number of stops between these two points. Let's add a new keyframe, say 90%, with a translateY of 10%:
@keyframes slideDown { 0% {transform: translateY(-100%);} 90% {transform: translateY(10%);} 100% {transform: translateY(0%);}}
We're translating the position of the dropdown going from -100% to
