CSS Проблема постепенного появления / исчезновения анимации

Question

Кажется, у меня проблема с анимацией CSS, когда, когда я закрываю раскрывающийся список, фон сразу исчезает, а остальные исчезают, и это делает выпадающий список странным, я перепробовал все, что смог найти на CSS безуспешная анимация, поэтому я решил обратиться, чтобы узнать, знает ли кто-нибудь.

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; }
}

Любые идеи приветствуются. Заранее благодарим за то, что нашли время прочитать это.

Answer 1

Здравствуйте, опубликованный вами код кажется неполным, и я предполагаю, что вы используете некоторые другие CSS библиотеки, тем не менее, формируйте то, что, как я понимаю, вы хотите достичь ниже.

EDIT: visibility: hidden attribute следует удалить из .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; }
}