Как добавить анимацию?

Question

[Александр Коновалов]

Здравствуйте! Есть код:
<div class="game-info gameend hidden"></div>

$('.gameend').removeClass('hidden');

Здесь JS удаляет у класса gameend hidden. Как добавить сюда css анимацию при удалении hidden'а?

Answer 1

[Кирилл]

проще добавлять класс, на пример active и в стилях добавить анимацию к .gameend,active

Comments

[Александр Коновалов]

Кирилл Кубляков а можно подробнее? Как сюда добавить анимацию с классом .flipInX?

Answer 2

[HamSter]

Если с классом .flipInX то пример

.game-info {
  transition: all .52s ease-in-out;
  opacity: 0;
  transform: translateX(1000%);
}

.game-info.hidden {
  opacity: 1;
  transform: translateX(0%);  
}

Comments

[Александр Коновалов]

HamSter а если у меня уже есть анимация с классом .flipInX, как ее добавить?

[HamSter]

Александр Коновалов: codepen.io/semenchenko/pen/ZOLVpW