Pure CSS3 slideshow

slideshow.html

<div class="slideshow">
  <img src="slideshow-001.png" alt="Slideshow 1">
  <img src="slideshow-002.png" alt="Slideshow 2">
</div>

slideshow.scss

.slideshow {
  position: relative;

  /* adjust to fit images */
  height: 350px;

  img {
    position: absolute;

    opacity: 0;
    &:first-child { opacity: 1; }
    transition: opacity .5s;

    &:nth-child(1) { animation: xfade 8s 0s infinite; }
    &:nth-child(2) { animation: xfade 8s 4s infinite; }
    /* add if necessary  */
  }
}

@keyframes xfade {
 0%   { opacity: 0; }
 10%  { opacity: 1; }
 50%  { opacity: 1; }
 60%  { opacity: 0; }
}