CSS3褪色有错误动作

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="" />

Answer 2

技术方案为：

总是显示第一个图像 opacity:1;
第二张图片将显示 30-66%，如果不在此范围内则始终隐藏。
第三张图片将显示 64-96%，如果不在此范围内则始终隐藏。
** 我也想在将第三张图片换成第一张图片时有淡入淡出的效果，解决方案是从 96-100% 隐藏第三张图片。请参阅下面的编码。

    /*.item:nth-child(1){
        -webkit-animation: fade1 50s infinite;
    }*/
    .item:nth-child(2){
        -webkit-animation: fade2 50s infinite;
    }
    .item:nth-child(3){
        -webkit-animation: fade3 50s infinite;
    }
    /*@-webkit-keyframes fade1 {
        0% {opacity:0;}
        2% {opacity:1;}
        100% {opacity:1;}
    }*/
    @-webkit-keyframes fade2 {
        0% {opacity:0;}
        30% {opacity:0;}
        34% {opacity:1;}
        65% {opacity:1;}
        66% {opacity:0;}
        100% {opacity:0;}
    }
    @-webkit-keyframes fade3 {
        0% {opacity:0;}
        60% {opacity:0;}
        64% {opacity:1;}
        96% {opacity:1;}
        100% {opacity:0;}
    }

<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="" />

CSS3褪色有错误动作

CSS3 fading have wrong action

css

webkit

slideshow

css-animations