<div class="slideshow">
  <div class="slide" style="background-color: #ff6347;">Slide 1</div>
  <div class="slide" style="background-color: #4682b4;">Slide 2</div>
  <div class="slide" style="background-color: #8a2be2;">Slide 3</div>
</div>

.slideshow {
  position: relative;
  width: 100%;
  height: 200px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideAnimation 9s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 2s; }
.slide:nth-child(3) { animation-delay: 4s; }

@keyframes slideAnimation {
  0%, 33% { opacity: 1; }
  66%, 100% { opacity: 0; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.