Анимация блока в React при нажатии кнопки

Question

У меня есть кнопка. Когда я нажимаю на него, появляется блок, то же самое происходит в другом направлении. Мне нужно, чтобы этот блок не просто исчезал, а медленно исчезал с максимальной высоты: 100 пикселей до максимальной высоты: 0 пикселей или что-то вроде этого. Я пытался установить свойства анимации с помощью css, но это не помогло.

{
  props.additionalFilterbars &&
    <div className={s['filterbar-additional']}> 
        {withSelectFilter(attack, props.setAttack, 'Attack', null, null, <GiSwordWound />)}
        {withSelectFilter(health, props.setHealth, 'Health', null, null, <GiWaterDrop />)}
        {withSelectFilter(type, props.setCardType, 'Type', types, props.setTypeName)}
        {withSelectFilter(rarity, props.setRarity, 'Rarities', rarities, props.setRarityName)}
        {withSelectFilter(minionType, props.setMinionType, 'Minion Type', minionTypes, props.setMinionTypeName)}
        {withSelectFilter(keyword, props.setKeyword, 'Keywords', keywords, props.setKeywordName)}
    </div>
}

&-additional {
        // padding: 15px 0;
        display: flex;
        justify-content: center;
        animation: mymove 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards; 
        // & > * {
        //     animation: mymove 5s;
        // }
    }
    @keyframes mymove {
        from {
            height: 0px;
        }
        to {
            height: 70px;
            padding: 15px 0;
            border-top: 2px inset rgb(70, 0, 0);
        }
    }