JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="css-slideshow">
	<figure class="image3">
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" /> 
	</figure>
	<figure class="image3">
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />
	</figure>

  </div>

CSS

.css-slideshow{
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure{
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}



figure.image2:nth-child(1) {
  animation: xfade2 48s 42s infinite;
}
figure.image2:nth-child(2) {
  animation: xfade2 48s 36s infinite;
}
figure.image2:nth-child(3) {
  animation: xfade2 48s 30s infinite;
}
figure.image2:nth-child(4) {
  animation: xfade2 48s 24s infinite;
}
figure.image2:nth-child(5) {
  animation: xfade2 48s 18s infinite;
}
figure.image2:nth-child(6) {
  animation: xfade2 48s 12s infinite;
}
figure.image2:nth-child(7) {
  animation: xfade2 48s 6s infinite;
}
figure.image2:nth-child(8) {
  animation: xfade2 48s 0s infinite;
}

figure.image3:nth-child(1) {
  animation: xfade3 8s 4s infinite;
}
figure.image3:nth-child(2) {
  animation: xfade3 8s 0s infinite;
}

@keyframes xfade3{
  0%{
    opacity: 1;
  }
  40% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}