Обратная анимация при зависании

Question

Я пытаюсь создать раскрывающееся меню, которое скользит вниз, когда я навешиваю верх и снова сползаю, когда я нахожусь с триггером меню. Слайд вниз работает отлично, но я не могу заставить слайд работать. Было бы хорошо, если я могу получить решение с чистым CSS Вот мой jsfiddle: https://jsfiddle.net/kp073okj/ А для ребят из вас, которые хотят код прямо сейчас, вот это:

HTML-код:

<div class="Dropdown"> 
<img src="Images/Dropdown.png" class="Dropdown-Button"> 
<div class="Dropdown-Content"> 
    <a href="#">Informationen</a> 
    <a href="#">SocialMedia</a> 
    <a href="#">Anmeldung</a> 
    <a href="#">Dokumentation</a> 
</div> 
</div> 

CSS-код:

.Dropdown { 
    position: fixed; 
    z-index: 250; 
    display: block; 
    width: 2%; 
    height: auto; 
    margin-left: 80%; 
} 

.Dropdown-Button { 
    position: relative; 
    z-index: 280; 
    font-size: 1.6vw; 
    border: none; 
    padding-bottom: 0.5em; 
    width: 100%; 
    height: auto; 
    margin-top: 1em; 
} 

.Dropdown-Content { 
    height: 0; 
    overflow: hidden; 
} 

.Dropdown-Content a { 
    color: white; 
    text-decoration: none; 
    padding: 0.5em 4.65em 0.5em 0.8em; 
    display: block; 
    text-align: left; 
    font-size: 1.6vw; 
} 


.Dropdown:hover .Dropdown-Content { 
    display: block; 
    height: 400%; 
    animation-name: dropdown; 
    animation-duration: 1s; 
    position: absolute; 
    z-index: 280; 
    background-color: #303030; 
    text-align: left; 
    margin-left: -0.8em; 
} 

.Dropdown-Content a:hover { 
    background-color: #555; 
} 


@keyframes dropdown { 
    0% {height: 0%; transition: height 2s;} 
    100% {height: 400%; transition: height 2s;} 
} 

Answer 1

лучший способ может быть просто использовать переход, чтобы изменить высоту, без анимации. В конце концов, вы просто оживляете переход.

Короче .. какое значение здесь в анимации?

body { margin: 50px; background: #aaa;} 
 

 
.Dropdown { 
 
    position: fixed; 
 
    z-index: 250; 
 
    display: block; 
 
    width: 2%; 
 
    height: auto; 
 
    /* margin-left: 80% commented out for snippet */; 
 
} 
 

 
.Dropdown-Button { 
 
    position: relative; 
 
    z-index: 280; 
 
    font-size: 1.6vw; 
 
    border: none; 
 
    padding-bottom: 0.5em; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-top: 1em; 
 
} 
 

 
.Dropdown-Content { 
 
    display: block; 
 
    height: 0%; 
 
    position: absolute; 
 
    z-index: 280; 
 
    background-color: #303030; 
 
    text-align: left; 
 
    margin-left: -0.8em; 
 
    overflow: hidden; 
 
    transition: height 2s; 
 
} 
 

 
.Dropdown-Content a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 0.5em 4.65em 0.5em 0.8em; 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 1.6vw; 
 
} 
 

 

 
.Dropdown:hover .Dropdown-Content { 
 
    height: 400%; 
 
    transition: height 2s; 
 
} 
 

 
.Dropdown-Content a:hover { 
 
    background-color: #555; 
 
}

<div class="Dropdown"> 
 
<img src="http://placehold.it/140x140" class="Dropdown-Button"> 
 
<div class="Dropdown-Content"> 
 
    <a href="#">Informationen</a> 
 
    <a href="#">SocialMedia</a> 
 
    <a href="#">Anmeldung</a> 
 
    <a href="#">Dokumentation</a> 
 
</div> 
 
</div>