CSS3 淡入淡出有错误 Action

Question

我正在尝试使用 CSS3 创建一个图片库，而不需要 javascript。这是我目前的解决方案:

.slide {
  position: absolute;
}
.slide:nth-child(1) {
  -webkit-animation: fade 24s 18s infinite;
  z-index: 10;
}
.slide:nth-child(2) {
  -webkit-animation: fade 24s 12s infinite;
  z-index: 10;
}
.slide:nth-child(3) {
  -webkit-animation: fade 24s 6s infinite;
  z-index: 10;
}
.slide:nth-child(4) {
  -webkit-animation: fade 24s 0s infinite;
  z-index: 10;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

我的问题是，当 CSS 渲染第四张图片时，它会在渲染下一张图片之前显示一个空白区域，而当它循环返回以再次渲染该图片时，它总是会在每张图片之间显示一个空白区域。

我该如何解决这个问题？有人可以提出解决方案吗。

谢谢。

Answer 1

实际上，在稍微修改了代码之后，我设法在 Chrome 中重现了 OP 的问题。

问题是由于 img 的不透明度在动画时间上的同步不良造成的。当不透明度变为 0 并且下方没有可见图像时，图像会闪烁。

在迭代过程中保持同步的一种直观且易于理解的解决方案是定义一系列动画，每个图像一个，这样我们就可以单独优化每个图像的过渡，就像这样:

    .slide {
    position:absolute;
}

.slide:nth-child(1) {
    -webkit-animation: fade0 24s infinite;
    z-index:10;
}

.slide:nth-child(2) {
    -webkit-animation: fade25 24s infinite;
    z-index:10;
}

.slide:nth-child(3) {
    -webkit-animation: fade50 24s infinite;
    z-index:10;
}

.slide:nth-child(4) {
    -webkit-animation: fade75 24s infinite; 
    z-index:10;
}

@-webkit-keyframes fade0 {
   0% {opacity:0.95;}
   2% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade25 {
   0% {opacity:0;}
   25% {opacity:0;}
   27% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade50 {
   0% {opacity:0;}
   50% {opacity:0;}
   52% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade75 {
   0% {opacity:0;}
   75% {opacity:0;}
   77% {opacity:1;}
   100% {opacity:1;} 
   }

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />