JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

CSS

.introImgBlurAnimate {
    -webkit-animation: flash 1s ease 3;
	-moz-animation: flash 1s ease 3;
	-ms-animation: flash 1s ease 3;
	-o-animation: flash 1s ease 3;
	animation: flash 1s ease 3;
}

/* animation */
@-webkit-keyframes flash {
	50% { opacity: 0; }
}

@-moz-keyframes flash {
	50% { opacity: 0; }
}

@-ms-keyframes flash {
	50% { opacity: 0; }
}

@-o-keyframes flash {
	50% { opacity: 0; }
}

@keyframes flash {
	50% { opacity: 0; }
}

JavaScript

var introLinesBlurEls = ['one', 'two', 'three'];
var count = 0;
moveLines(0);
function moveLines(){
            if(count<introLinesBlurEls.length){
                thisMoveLine = document.getElementById(introLinesBlurEls[count]);
                    thisMoveLine.className = 'introImgBlurAnimate';
                    count++;
                    PrefixedEvent(thisMoveLine, "AnimationEnd", moveLines);                                   
            }else{
                alert('Hey. I am done.');
            }
}


//common function to bind event listeners for events with all vendor prefixes
function PrefixedEvent(element, type, callback) {
    var pfx = ["webkit", "moz", "MS", "o", ""];
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}