Heiko Matthies Heiko Matthies - 3 months ago 17
CSS Question

Reverse animation on hover off

I am trying to create a dropdown menu which slides down when I hover over and slides up again when I hover off the menu trigger.
The slide down works perfectly but I can't get the slide up working. It would be nice if I can get a solution with pure CSS
Here is my jsfiddle: https://jsfiddle.net/kp073okj/
And for the guys of you who want the code right now, here it is:

HTML-Code:

<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-Code:

.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

A better method may be to simply use transition to alter the height, no animation. After all, you are just animating the transition.

In short.. what value is there in the animation here?

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>

Comments