Looking to add some CSS animations to a menu but running into some issues. I've got the code below for the menu to fade in on hover, but can't quite figure out how to make it fade out smoothly as well.
I've tried a few approaches, but all I'm getting is a fade-in effect followed by an immediate fade-out before the block just appears without any animation.
ul{
list-style:none;
padding:0px;
margin:0px;
}
ul >li >ul{
display:none;
}
ul >li:hover >ul{
display:block;
}
.fade_in {
-webkit-animation-name: fade_in;
-webkit-animation-duration: 1s;
animation-name: fade_in;
animation-duration: 1s;
}
@-webkit-keyframes fade_in {
from {opacity: 0}
to {opacity: 1}
}
@keyframes fade_in {
from {opacity: 0}
to {opacity: 1}
}
.fade_out {
-webkit-animation-name: fade_out;
-webkit-animation-duration: 1s;
animation-name: fade_out;
animation-duration: 1s;
}
@-webkit-keyframes fade_out {
from {opacity: 1}
to {opacity: 0}
}
@keyframes fade_out {
from {opacity: 1}
to {opacity: 0}
}<ul>
<li>Heading
<ul class="fade_in">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>