Question

我正在尝试将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;}
 }

问题在最后一个图像（第四个）之后开始，第四个图像淡入背景，然后第一个图像再次开始循环。我想摆脱循环结束之间的这种奇怪切割，最后一个图像在背景中淡入一小段时间，将第四个图像直接与循环结束时的第一个图像交叉淡化的完美动画值是什么？？

Answer 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

演示

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

1 个答案: