Как добавить класс после animation?

Question

[Елена]

У меня добавляется два класса при клике на один объект. У одного класса при добавлении срабатывает анимация. Мне нужно после анимации добавлять второй класс. Думала что можно через settimeout сделать задержку в саму анимацию, но увы не вышло. Видимо из-за того, что попадают в even loop. Вот как это решить не понимаю.
На js добавляют так классы:

sectionAboutLinkEmail.addEventListener('click', () => {
  container.classList.add('zoom');
  popup.classList.add('popup_open');
});

Та самая анимация:

.zoom {
  animation: zoom 1.5s ease-in;
  animation-fill-mode: both;
}

@keyframes zoom {
  0% {
    opacity: 0.1;
    transform: scale3d(0, 0, 0) translate3d(80vw, -30vw, 0);
  }

  100% {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

У второго класса:

.popup_open {
  opacity: 1;
  z-index: 2;
}

Answer 1

[xdevelx]

Как то так
https://codepen.io/xdevelx/pen/PoWmeOM

animationend

Comments

[Елена]

xdevelx спасибо)