Почему не удаётся вызвать анимацию второй раз?

Question

[sergey_from_saratov]

Хочу чтобы при нажатии на кнопку эффект красного бэкграунда заново начинался, но этого не происходит. Почему? Как фиксить? И как избежать бага когда этот элемент с анимацией скрываешь, а потом отображаешь анимация начинается заново?
https://codepen.io/anon/pen/rzZYLV

Answer 1

[0xD34F]

Надо удалять класс, отвечающий за анимацию, после её завершения. Можно делать это по событию animationend:

<button>click me</button>

button {
  background: green;
}

@keyframes xxx {
    0% { background-color: red; }
  100% { background-color: transparent; }
}

.xxx {
  animation: xxx 2s;
}

$('button').on({
  click() {
    $(this).addClass('xxx');
  },
  animationend() {
    $(this).removeClass('xxx');
  },
});