erikjung
5/1/2013 - 5:59 AM

Animation End Event

Animation End Event

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
setTimeout(function () {
  var foo = document.querySelector('.foo')
  
  foo.addEventListener('webkitAnimationEnd', function () {
    console.log('Animation End')
    foo.parentNode.removeChild(foo);
  })
  
  foo.classList.add('removed')
}, 3000)
/**
 * Animation End Event
 */

@keyframes remove {
  from {
    scale(1, 1);
  }
  to {
    scale(0, 0);
    opacity: .2;
  }
}

.removed {
  animation-name: remove;
  animation-duration: 360ms;
  animation-fill-mode: both;
}

.foo {
  background: pink;
  border-radius: 1em;
  width: 10em;
  height: 10em;
}