JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tst"></div>
CSS
#tst {
height: 200px;
width: 200px;
background: red;
position: relative;
-webkit-animation-name: anim;
-o-animation-name: anim;
animation-name: anim;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes anim {
0% {
left: 50%
}
100% {
left: 0;
}
}
@keyframes anim {
0% {
left: 50%
}
100% {
left: 0;
}
}
JavaScript
showMessage = function () {
alert('Transition has finished');
}
var element = document.getElementById("tst");
/* element.addEventListener("webkitAnimationEnd", showMessage, false); */
/* element.addEventListener("oAnimationEnd", showMessage, false); */
/* element.addEventListener("msAnimationEnd", showMessage, false); */
element.addEventListener("animationend", showMessage, false);