JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box b1 fadeInOut">
    <img src="http://upload.wikimedia.org/wikipedia/commons/7/7e/Cute-Ball-Favorites-icon.png"/>
</div>
<div class="box b2 fadeInOut">
    <img src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/256/Yahoo-Messenger-icon.png"/>
</div>
<div class="box b3 fadeInOut">
    <img src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" />
</div>

CSS

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0;}  
}

.box{
    height:100px;
    width:100px;
    opacity:0;
    position:absolute;
}

img{
    width:100%;
}



.fadeInOut.b1{
    animation : fade 6s infinite;
    }


.fadeInOut.b2{
    animation : fade 6s infinite;
    animation-delay : 2s
    }

.fadeInOut.b3{
    animation : fade 6s infinite;
    animation-delay : 4s
    }