html - Text showing before animation is done

Question

I'm trying to create a dropdown animation, and I got it to work except the text. The text shows instantly before the animation is done. This makes the animation look really bad.

I hope you guys know how to fix something like this.

This is my code:

.drop-down-btn:hover + .drop-down {
    display: block!important;
}

.drop-down:hover {
    display: block!important;
}

.drop-down {
    display: none;
    position: absolute;
    background-color: #151C35;
    color: #626677;
    width: 200px;
    height: 252px;
    z-index: 999;
    border-left: 3px solid #5A93FF;
}

.drop-down a {
    padding: 10px;
    display: block;
    color: #626677;
}

.drop-down a:hover {
    background-color: #2b3146;
    color: white;
    text-decoration: none;
}

@keyframes drop-down-animation {
    from {
        height: 0px;
    }

    to {
        height: 252px;
    }
}

.drop-down-animation {
    animation-name: drop-down-animation;
    -webkit-animation-name: drop-down-animation;
}

.animated {
    animation-duration: .3s;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    -webkit-animation-fill-mode: both
}

<a class="drop-down-btn">Dropdown btn <i class="fas fa-caret-down"></i></a>
<div class="drop-down drop-down-animation animated">
  <a href="#"><i class="fas fa-database fa-fw"></i> test</a>
  <a href="#"><i class="fas fa-server fa-fw"></i> test</a>
  <a href="#"><i class="fas fa-cloud fa-fw"></i> test</a>
  <a href="#"><i class="fas fa-globe fa-fw"></i> test</a>
  <a href="#"><i class="fab fa-discord fa-fw"></i> test</a>
  <a href="#"><i class="fas fa-globe fa-fw"></i> test</a>
</div>

question from:https://stackoverflow.com/questions/66060429/text-showing-before-animation-is-done

Answer 1

you can add overflow: hidden to the .drop-down class and make it when the drop appear the list appear with it and hide the out of the drop.

.drop-down {
   display: none;
   position: absolute;
   background-color: #151C35;
   color: #626677;
   width: 200px;
   height: 252px;
   z-index: 999;
   border-left: 3px solid #5A93FF;
   overflow: hidden;
}