Как сделать обратную анимацию(keyframes/js)?

Question

[Сергей Кошкин]

cube-store.com.ua На сайте есть куб, кликая на который происходит анимация в два этапа. Но как сделать обратную анимацию? Куб(0) -> Куб(1) -> Куб(2) -> Куб(1) -> Куб(0) -> и. т.д.

Comments

[Nikolay Talanov]

Зависит от того, разные ли свойства анимируете. Если разные, то можно вообще обойтись добавлением/убиранием класса и использованием css transition, где у второго в очереди анимации свойства будет стоять delay на анимацию. В общем если есть пример, то залейте на codepen/jsfiddle

Answer 1

[kn1ght_t]

изначально поставьте класс active тегу button, при клике меняйте на hover, зачем убирайте все классы

Comments

[Сергей Кошкин]

мне обратная анимация нужна, а в вашем случае будет тоже самое что уже есть...

[kn1ght_t]

Сергей Кошкин: из Куб(0) всегда попадаем в Куб(1), значит просто добавляем класс hover, из Куб(1) можем попасть как в Куб(2), так и в Куб(0), значит нужно счетчик поставить и проверять его значение при переходе из Куб(1) (если счетчик == 0, попадаем в Куб(2); если счетчик == 1, попадаем в Куб(0) и обнуляем счетчик), ну и при переходе из Куб(2) всегда попадаем в Куб(1), а значит просто убираем класс active, добавляем класс hover