transitioneend

by Casufi

HTML

<button id="doshort" type="button">
  Short
</button>
<button id="dolong" type="button">
  Long
</button>
<div id="parent">
  <div id="child" class="animate">

  </div>
</div>

CSS

@keyframes tosmall{
  0% {width: 100%}
  100% {width: 50%}	
}

#parent {
  width: 700px;
  height: 300px;
  background-color: rgba(90, 0, 90, 0.2);
  padding: 20px;
}

#child {
  width: 100%;
  height: 100%;
  background-color: rgba(70, 0, 90, 0.7);
}

#child.short {
  width: 50%;
	animation: tosmall 1s
}

JavaScript

var short = document.getElementById('doshort');
var long = document.getElementById('dolong');
var childblock = document.getElementById('child');
var parenblock = document.getElementById('parent');
childblock.addEventListener('animationend', function() {
  alert("child animation")
});
parenblock.addEventListener('animationend', function() {
  alert("parent animation")
});

if (short) {
  short.addEventListener('click', function() {
    childblock.classList.add('short');
  });
}
if (long) {
  long.addEventListener('click', function() {
    childblock.classList.remove('short');
  });
}