Html 如何制作完美的交叉淡入动画？

我正在尝试制作4张相互交叉淡入的图像。我有这个，但有点小问题

 <div>
   <img class="first-img" src="img1.jpg">
    <img class="second-img" src="img2.jpg">
    <img class="third-img" src="img3.jpg">
    <img class="fourth-img" src="img4.jpg">
 </div>

问题发生在最后一张图像（第四张）之后，第四张图像淡入背景，然后第一张图像再次开始循环。

---

我想摆脱循环结束时的这种奇怪切割，最后一张图像会在背景中淡出一小段时间，让第四张图像与循环结束时的第一张图像直接交叉淡出的完美动画值是什么？

如果你注意到，它不仅仅是最后一张图像。。在第一个周期之后，所有这些都会发生

这是因为您的图像都以

不透明度：1

（默认值）开头。但是在开始设置

关键帧的动画后

会控制

不透明度

，所以现在它们都是0，除了每次交叉淡入的两个

当它们交叉衰落时，一个从0-1，另一个从1-0，它们处于不同的半透明度阶段，因此背景也会渗入。。避免这种情况的唯一方法是在现有图像上淡入新图像，并在完全显示后将前一个设置为0不透明度

试一试

---

在

上的演示对我来说很好：一个带有图像的示例也很好地适用于Ruirize和Danko，OP是正确的。在第一幅图像开始淡入前，最后一幅图像开始淡入背景色。。是的，谢谢你！这解释了发生的事情，也解决了问题，谢谢。

 img {
 position: absolute;
 top: 0;
 left: 0;
 animation: crossfade 20s infinite;
 }

 .first-img {
 z-index: 4;
 }

 .second-img {
 z-index: 3;
 animation-delay: 5s;
 }

 .third-img {
 z-index: 2;
 animation-delay: 10s;
 }

 .fourth-img {
 z-index: 1;
 animation-delay: 15s;
 }

 @keyframes crossfade {
 0% {opacity: 1;}
 15% {opacity: 1;}
 25% {opacity: 0;}
 90% {opacity: 0;}
 100% {opacity: 1;}
 }

@keyframes crossfade {
    0% {opacity: 1; z-index:10}
   15% {opacity: 1;}
   25% {opacity: 0;}
   80% {opacity: 0; z-index:1}
   90% {opacity: 1;}
  100% {opacity: 1; z-index:1}
}