Как повторно использовать KeyFrames, чтобы воспроизвести анимацию назад? ⇐ CSS

[Anonymous]

У меня есть следующий CSS: < /p>

Код: Выделить всё

    @keyframes expandTop {
from {
height: 0;
}
to {
height: 100px;
}
}
&.expand {
animation: expandTop 0.5s ease-out forwards;
}
@keyframes collapseTop {
from {
height: 100px;
}
to {
height: 0;
}
}
&.collapse {
animation: collapseTop 0.5s ease-out forwards;
}
&.still {
animation: none;
}
}

Это работает, но кажется, что должен быть способ повторно использовать тот же @keyframes . Я попробовал кучу комбинаций обратного и назад и т. Д., но безрезультатно. Анимация запускается путем переключения класса CSS. Я бы хотел что-то в этом направлении, но это работает: < /p>

Код: Выделить всё

    @keyframes top {
from {
height: 0;
}
to {
height: 100px;
}
}
&.expand {
animation: top 0.5s ease-out forwards;
}
&.collapse {
animation: top 0.5s ease-out reverse backwards;
}
&.still {
animation: none;
}

Я стучал головой по документам, но это не помогает ... Я облажался, потому что я использую классы для запуска?


Подробнее здесь: https://stackoverflow.com/questions/794 ... -backwards