Почему, если я уберу это css, оно не будет работать должным образом?

Question

Почему обратное значение во втором & > div не работает, даже если я изменяю имя анимации. Я пытался установить обратное значение вместо прямого, но это не работает. Кроме того, как я могу сократить этот css мир, потому что я удваиваю код? Также мне следует использовать props.additionalFilterbars для изменения моего className или есть другой способ анимировать блоки?

&-additional {
        display: flex;
        justify-content: center;
        overflow: hidden;
        max-height: 0px;
        border-top: 2px inset transparent;
        transition: all 0.3s ease-in;
        &_active {
            display: flex;
            justify-content: center;
            transition: all 0.3s ease-in;
            padding: 15px 0;
            border-top: 2px inset rgb(70, 0, 0);
            max-height: 70px;
            & > div {
                opacity: 0;
                animation: my 0.5s;
                animation-delay: 0.2s;
                animation-fill-mode: forwards;  
            }
        }
        & > div { 
            opacity: 0;
            animation: mymove 0.5s;
            animation-fill-mode: forwards; 
        }
    }
    @keyframes mymove {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    @keyframes my {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

<div className={s[`filterbar-additional${props.additionalFilterbars ? '_active' : ''}`]}> 
        <div>
            {withSelectFilter(attack, props.setAttack, 'Attack', null, null, <GiSwordWound />)}
        </div>
        <div>
            {withSelectFilter(health, props.setHealth, 'Health', null, null, <GiWaterDrop />)}
        </div>
</div>