Animation events example

Made for kutac.cz

HTML

<div></div>

CSS

div {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 80px;
  min-width: 80px;
  padding: 20px;
  background-color: red;
  font-size: 25px;
  transition: 2s ease-in-out;
}

JavaScript

const div = document.querySelector('div')
div.addEventListener('click', e => e.target.style.left = '400px')
// On transition end event
div.addEventListener('transitionend', e => e.target.innerText = '( ͡° ͜ʖ ͡°)')