Почему не срабатывает анимация?

Question

[kentos]

Здравствуйте, есть проблемка, не срабатывает анимация, вот код:

setTimeout(function() {
    document.querySelector('.notification_proofly').classList.add('fadeOut');
    letStartAlert.removeChild(container);
  }, 2000);

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

Answer 1

[hzzzzl]

нет длительности анимации
forwards чтобы остался невидимым после анимации

.fadeOut {
  animation: 2s fadeOut forwards;
}

https://codepen.io/anon/pen/GarLqq?editors=1010

Comments

[kentos]

все равно не помогло, если вне таймаута, то работает, но нужно именно чтобы когда ремув происходил

[Шохрух Шаймардонов]

kentos, надо сменить

.fadeOut {
  animation: 2s fadeOut forwards;
}

на

.fadeOut {
  animation: 2s fadeOut infinite;
}

Answer 2

[Андрей]

Не хватает длительности animation-duration
и animation-fill-mode чтобы сохранить стили последнего кадра анимации

https://codepen.io/begprod/pen/qGRwOG

Comments

[kentos]

все равно нет(