JSFiddle - React, Tailwind, and code Playground

by milpool

HTML

<div id="animation"> 
<img src="http://40.media.tumblr.com/a01655de776bd067ca4e18202a627413/tumblr_np7439ut8I1r4ne3yo1_500.png"/>
<img src="http://36.media.tumblr.com/725e77602cfeb5d7f5ea0bbfad2fb733/tumblr_ne8lp6ueDf1r4ne3yo1_500.png"/>
<img src="http://41.media.tumblr.com/2f2a889066a5a063afdaff0b9d902736/tumblr_ndm8de6dQf1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/7a43bf45cf1a7af3ae3905836fcdd099/tumblr_nd8qswiede1r4ne3yo1_500.png"/>
<img src="http://41.media.tumblr.com/0e009d63f3ea01098226a5ee701de77a/tumblr_naza0zMx7J1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/575a644106ede347b49d4a5624f17fa8/tumblr_n9191hKTmL1r4ne3yo1_500.png" class="fifth" />
<img src="http://41.media.tumblr.com/614aad4a51b8a576a3430d3e259bc75f/tumblr_n72f05PKPB1r4ne3yo1_500.png"/>
<img src="http://41.media.tumblr.com/33b0e759055bfa5dce819a27d9a73011/tumblr_n72ex2N8061r4ne3yo1_500.png"/>
<img src="http://36.media.tumblr.com/1199e01925477c64d0ed5f3c1b492fb6/tumblr_n91931tRBR1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/bade8bf947084da94b003ec3eabca246/tumblr_n72f27lQub1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/181f71a4b6fa1b065aea5eeacd0563b8/tumblr_n72f3c0Tk81r4ne3yo1_500.png"/>
<img src="http://36.media.tumblr.com/d1090a0965929b4558e21a6cd0f72340/tumblr_n7ci6fwdSV1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/b7d177a546616cbb8eff2b12dd9e97fb/tumblr_n918wcwyxU1r4ne3yo1_500.png"/>
<img src="http://41.media.tumblr.com/4cfb1de9190cb44aa702c7fb00a896f3/tumblr_n7ci5q4KG41r4ne3yo1_500.png"/>
<img src="http://36.media.tumblr.com/f136b7ae0c1189d7c34a29969fb1941b/tumblr_n7ci52dTYu1r4ne3yo1_500.png"/>
<img src="http://41.media.tumblr.com/760cda72f366cdf93be8f3d917d6f888/tumblr_mlvtyoqwvZ1r4ne3yo1_500.png"/>
<img src="http://40.media.tumblr.com/b5a61f26a20050178b5f578d9fca8bb3/tumblr_n72ezhO2s01r4ne3yo1_500.png"/>
<img src="http://36.media.tumblr.com/a11055865d4866c7290d09e7c7a1ba99/tumblr_n72f2nsfaq1r4ne3yo1_500.png"/>
<img...

CSS

img {
width:0;
height:0;
position:absolute;
top:0;
left:0;
	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(1, end);
}

.first, .second, .third, .fourth, .fifth {
display:block;width:100%;height:auto;}

.first {-webkit-animation-delay:0s;}
.second {-webkit-animation-delay:0.2s;}
.third {-webkit-animation-delay:0.4s;}
.fourth{-webkit-animation-delay:0.6s;}
.fifth{-webkit-animation-delay:0.8s;}

@-webkit-keyframes flash {0% {opacity: 1;}20% {opacity: 0;}100% {opacity: 0;}}

JavaScript

// MOVE FORWARD	
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

setInterval(function(){	
$('.fourth, .third, .second, .first').attr('class','');
$('.fifth').removeClass('fifth').next().addClass('fifth');
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

},10000);