JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="cf3" class="shadow">
  <img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />
  <img class="top" src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />
</div>

CSS

.shadow {
  box-shadow: 5px 5px 5px #aaa;
  margin-bottom: 10px;
}

@keyframes cf3FadeOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
 }
75% {
  opacity:0;
 }
100% {
 opacity:0;
 }
}
@keyframes cf3FadeIn {
 0% {
   opacity:0;
 }
 25% {
  opacity:0;
 }
75% {
  opacity:1;
 }
100% {
 opacity:1;
 }
}
#cf3 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
  background-image:url(http://placehold.it/450x281?text=bgImage);
}
#cf3 img {
  position:absolute;
  left:0; 
  transition: all 2s ease-in-out;
  animation-duration: 10s;
  animation-delay: -16s; 
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#cf3 img.top { 
  opacity:1;
  animation-name: cf3FadeOut;
}
#cf3 img.bottom {
	opacity:0;
  animation-name: cf3FadeIn;
}