如何使用图像制作CSS动画，这些图像将自动播放。（没有用户交互）

我正在尝试，但我只知道如何使用Javascript制作图像滑块。。。有人能建议或给出一个代码来帮助我开始吗

---

我尝试过使用Java脚本，但它并没有满足我的需要。

您可以通过使用css动画和更改不同图像的不透明度来实现这一点。下面是一个演示如何做到这一点的示例

HTML

---

检查：我只是不明白你到底想达到什么目的。从我听上去，你可能在寻找GIF。谢谢你，但是，我知道使用GIF图像，现在是CSS制作动画的时候了，你能给我一个示例代码吗？不管怎样，我如何使用你给我的CSS，对我来说使用类或什么足够了吗？

<div class="fade-container">
  <img src="http://fillmurray.com/200/300" alt="Fading image" class="fade-img"/>
  <img src="https://source.unsplash.com/random" alt="Fading image" class="fade-img"/>
  <img src="https://placeimg.com/640/480/any" alt="Fading image" class="fade-img"/>
  <img src="http://pipsum.com/435x310.jpg" alt="Fading image" class="fade-img"/>
</div>

.fade-container {
  position: relative;
}

.fade-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

@keyframes fade {
  0% {
    opacity: 0; }
  4% {
    opacity: 1; }
  21% {
    opacity: 1; }
  25% {
    opacity: 0;
    -webkit-animation-delay: 9s;
    animation-delay: 9s; }
  100% {
    opacity: 0;
    -webkit-animation-delay: 9s;
    animation-delay: 9s; } 
}
.fade-img:nth-child(1) {
  animation: fade 12s ease-in-out infinite;
}

.fade-img:nth-child(2) {
  animation: fade 12s ease-in-out infinite;
  animation-delay: 3s;
  opacity: 0;
}

.fade-img:nth-child(3) {
  animation: fade 12s ease-in-out infinite;
  animation-delay: 6s;
  opacity: 0;
}
.fade-img:nth-child(4) {
  animation: fade 12s ease-in-out infinite;
  animation-delay: 9s;
  opacity: 0;
}