Animation events example 2

Made for kutac.cz

HTML

<div></div>

CSS

@keyframes changeColor {
    0% {
      background-color: red;
    }
    50% {
      background-color: blue;
    }
    100% {
      background-color: yellow;
    }
}

div {
  height: 80px;
  width: 80px;
  padding: 25px;
  background-color: red;
  cursor: pointer;
  font-size: 25px;
}

.animate {
  animation: changeColor 3s ease 3;
}

JavaScript

const div = document.querySelector('div')
// Start animation on click
div.addEventListener('click', e => e.target.classList.add('animate'))
// Listen for animation events
div.addEventListener('animationstart', e => e.target.innerText = 'Start')
div.addEventListener('animationiteration', e => e.target.innerText = 'Iteration')
div.addEventListener('animationend', e => e.target.innerText = 'End')