交叉淡入淡出2个元素以创建不带js的循环动画

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

.slideshow {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow img:first-child {
  opacity: 1;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slideshow img.fade-in {
  animation: fade 1s ease-in-out;
  opacity: 1;
}

.slideshow img.fade-out {
  animation: fade 1s ease-in-out reverse;
  opacity: 0;
}

function crossFade() {
  var images = document.querySelectorAll('.slideshow img');
  var currentImage = document.querySelector('.slideshow img.fade-in');
  var nextImage = currentImage.nextElementSibling || images[0];

  currentImage.classList.remove('fade-in');
  currentImage.classList.add('fade-out');
  nextImage.classList.add('fade-in');
}

setInterval(crossFade, 3000);