JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="#"><img src="https://www.google.ru/doodle4google/images/splashes/featured.png"/></a>
<a href="#"><img src="http://cdn.designcrowd.com.s3.amazonaws.com/blog/GoogleDoodle2011/HoliFestivalIndia.png"/></a>
<a href="#"><img src="http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif"/></a>
</div>

CSS

@keyframes example {
    0%   {opacity: 1;z-index:1;}
    30%   {opacity: 1;z-index:1;}
    35%   {opacity: .01;z-index:1;}
    36%   {opacity: 0;z-index:-1;}
    100%   {opacity: 0;z-index:-1;}
}
a img{
  max-width:100%;
}
a {
  position:relative;
  width:300px;
  position:absolute;
  top:0;
  left:0;
  height:100px;
  overflow:hidden;
  animation-name: example;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
div a:nth-child(0){
  animation-delay:0s;
}
div a:nth-child(1){
  animation-delay:10s;
}
div a:nth-child(2){
  animation-delay:20s;
}