JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div id="crossfade">
  <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
  <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
  <img src="http://farm6.staticflickr.com/5263/5601183065_f88a48d599.jpg" alt="Image 3">
  <img src="http://farm2.staticflickr.com/1415/983021323_8eb2f92c01.jpg" alt="Image 1">
  <img src="http://farm1.staticflickr.com/168/397834706_6a46c6ada5.jpg" alt="Image 1">
</div>

CSS

#crossfade>img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 30s linear infinite 0s;
}

#crossfade>img:nth-child(2) {
  animation-delay: 6s;
}

#crossfade>img:nth-child(3) {
  animation-delay: 12s;
}

#crossfade>img:nth-child(4) {
  animation-delay: 18s;
}

#crossfade>img:nth-child(5) {
  animation-delay: 24s;
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }

  17% {
    opacity: 1
  }

  25% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}