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>

CSS：

 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;}
 }

问题在最后一张图像（第四张）之后开始，第四张图像淡入背景，然后第一张图像再次开始循环播放。
我想摆脱循环结束之间的怪异切割，在那里最后一张图像淡入背景一会儿，什么是完美的动画值才能使第四张图像直接与循环结束时的第一张图像交叉渐变？

最佳答案

如果您注意到了，它不仅是最后一张图像，它也是第一个循环之后的所有图像。

发生这种情况是因为所有图像均以opacity:1（默认值）开头。但是，在开始为keyframes设置动画后，它们控制了opacity，因此现在它们都为0，除了每次交叉淡化的两个。

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

尝试

@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}
}

http://codepen.io/gpetrioli/pen/hyrjl上的演示

关于html - 如何制作完美的交叉渐变动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19935211/