JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cf">
  <img src="http://imguol.com/c/noticias/2013/12/13/13dez2013---esta-imagem-mostra-a-nebulosa-de-caranguejo-um-iconico-remanescente-de-supernova-na-nossa-galaxia-vista-do-observatorio-espacial-herschel-e-do-telescopio-hubble-uma-nuvem-de-gas-e-poeira-1386961235961_956x500.jpg" />
  <img src="http://s3.amazonaws.savoir.com.br/cea.com.br/imagem/cadastrocqlv/imagem/cadastrocqlv-53440.jpg" />
  <img src="http://www.robolaranja.com.br/wp-content/uploads/2014/10/Primeira-imagem-do-filme-de-Angry-Birds-%C3%A9-revelada-2.jpg" />
</div>

CSS

#cf {
  width:400px;
  height:200px;
  position:relative;
  overflow:hidden;
}
#cf img {
  position:absolute;
  top:0; left:0;
  max-width:100%;
  animation-name: cfFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 18s;
}

@keyframes cfFadeInOut {
  0% {opacity:1;}
  28% {opacity:1;}
  33% {opacity:0;}
  94% {opacity:0;}
  100% {opacity:1;}
}

#cf img:nth-of-type(1) {
  animation-delay: 12s;
}
#cf img:nth-of-type(2) {
  animation-delay: 6s;
}
#cf img:nth-of-type(3) {
  animation-delay: 0s;
}