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)
<div class="foo"></div>
/**
* 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;
}