JSFiddle - React, Tailwind, and code Playground

HTML

<img id="one" src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img id="two" src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img id="three" src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />
<img id="four" src="http://png-1.findicons.com/files/icons/2015/24x24_free_application/24/heart.png" alt="Heart" />

CSS

@-webkit-keyframes heartbounce {
  0%, 100% {
    top:0;
  }
  50% {
    top:-10px;
  }
}


img:first-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1s;
}
img:nth-child(2) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.2s;
}
img:nth-child(3) {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.4s;
}
img:last-child {
 -webkit-animation-name: heartbounce;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease;
 -webkit-animation-delay: 1.6s;
}



/* Bits just for JS Fiddle example */
body{padding-top:50px}
img{position:relative;}

JavaScript

function change()
    {
        // find our -webkit-keyframe rule
        document.getElementById('one').style.webkitAnimationName = "heartbounce";
        document.getElementById('two').style.webkitAnimationName = "heartbounce";
        document.getElementById('three').style.webkitAnimationName = "heartbounce";
        document.getElementById('four').style.webkitAnimationName = "heartbounce";
    }

setInterval(function(){ 
    document.getElementById('one').style.webkitAnimationName = "none";
    document.getElementById('two').style.webkitAnimationName = "none";
    document.getElementById('three').style.webkitAnimationName = "none";
    document.getElementById('four').style.webkitAnimationName = "none";
    
    setTimeout(function(){change();}, 0);
}, 10000);