JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div id="elem"></div>
<div id="write"></div>

CSS

#elem {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 1;
}

#elem.on {
    -webkit-animation: blink 0.5s ease;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
     100% {
        opacity: 1;
    }
}

JavaScript

var pfx = ["webkit", "moz", "MS", "o", ""];
function doAnim(element, animClass, type, callback) {
  var p = 0, l = pfx.length;
  var write = document.getElementById('write');
  function removeAndCall(){
      write.innerText = p;
    this.removeEventListener(pfx[p]+type, arguments.callee,false);
    callback();
  }
  for (; p < l; p++) {
    if (!pfx[p]) {
      type = type.toLowerCase();
    }
    element.classList.add(animClass);
    element.addEventListener(pfx[p]+type, removeAndCall, false);
  }
}

var elem = document.getElementById('elem');

doAnim(elem, 'on', 'AnimationEnd', function(){
  // this function will fire when the animation is finished
  elem.classList.remove('on');
});