Как я могу обратно прокрутить анимацию keyframes?

Question

[Максим Иванов]

При нажатии добавляется класс active для которого создана анимация с помощью keyframes. Я использую toggle и при ещё одном нажатии у меня анимация конечно не будет работать в обратном порядке.

Как можно добиться обратной анимации в данной ситуации?

У меня решение в голове только одно - создать два таких же кейфрейма, но чтобы у них анимация была обратная. После нажатия убирать класс active со старой анимацией и добавлять например unactive с новой (обратной) анимацией и через 0.4 секунды (именно столько длится анимация в css) с помощью setTimeOut убирать класс unactive

Comments

[imko]

setTimeout не нужен, у элемента с анимацией есть свои события ее выполнения, ну и тебе просто надо менять direction у нее когда она выполнится

Answer 1

[MikUrrey]

Вообще на счет добавления-удаления классов направление мысли верное, но вроде как писать обратную анимацию больше не нужно - появилось правило
animation-direction: reverse

Comments

[Максим Иванов]

Ну или так) В итоге я сделал как описал выше и попробовал с reverse. В итоге всё нахрен удалил и сделал через hover :D