CSS Animation FadeIn/Out Issue - html

Question

I seem to be getting an issue with my CSS animation where when I close the Dropdown the background disappears straight away whilst the rest fades away and it makes the dropdown look strange, I have tried everything I can find on CSS animation with no luck so I thought I'd reach out to see if anyone knew.
index.html
<li class="menu-item-3 dropdown">
<a>Info for volunteers</a>
<ul class="child">
<li>
<a href="<?php echo $root; ?>volunteers/your-roles/">
<div class="bold">Your roles</div>
<div class="sub">Your current roles and support</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/news/">
<div class="bold">News</div>
<div class="sub">News for members</div>
</a>
</li>
<li>
<a href="<?php echo $root; ?>volunteers/information/">
<div class="bold">Information</div>
<div class="sub">Useful downloads and pages</div>
</a>
</li>
</ul>
</li>
style.css
.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
visibility: hidden;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
#keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to { opacity: 1;margin-top: 0px; }
}
#keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to { opacity: 0;margin-top: 40px; }
}
Any ideas would be most appreciated. Thanks in advance for taking the time to read this.

Answer 1

Hello the code you posted seems to be incomplete and i would guess you are using some other CSS libraries, nevertheless form what i understand you want to achieve the below.
EDIT:
visibility:hidden attribute should be removed from the .header .nav_container .desktop ul li ul.child selector
.header .nav_container .desktop ul li ul.child {
display: block;
position: absolute;
top: calc( 100% + 30px );
z-index: 900;
background-color: #fff;
right: -10px;
min-width: 200px;
margin: 0;
overflow: hidden;
border: none;
padding: 0 32px;
box-shadow: 2px 2px 0 0 rgba(77, 77, 77, 0.3);
opacity: 0;
animation: fadeout 0.3s;
}
.header .nav_container .desktop ul li ul.child.open {
opacity: 1;
visibility: visible;
animation: fadein 0.3s;
}
#keyframes fadein {
from { opacity: 0;margin-top: 40px; }
to { opacity: 1;margin-top: 0px; }
}
#keyframes fadeout {
from { opacity: 1;margin-top: 0px; }
to { opacity: 0;margin-top: 40px; }
}