Question

我正在尝试用四种不同的图片创建一个非常简单的图像交叉淡入淡出效果。应该顺利从第1到第2，从第2到第3，第3到第4，然后回到第1。

这是我正在使用的代码：

HTML：

    <div class="css-slideshow"> 
      <figure> 
            <img src="test1.jpg"/> 
      </figure> 
      <figure> 
            <img src="test2.jpg"/> 
      </figure>
      <figure> 
            <img src="test3.jpg" /> 
      </figure>
      <figure> 
            <img src="test4.jpg" /> 
      </figure>  
    </div>

...和CSS：

    figure:nth-child(1) {
       -webkit-animation: xfade 12s 9s infinite;
    }
    figure:nth-child(2) {
       -webkit-animation: xfade 12s 6s infinite;
    }
    figure:nth-child(3) {
       -webkit-animation: xfade 12s 3s infinite;
    }
    figure:nth-child(4) {
       -webkit-animation: xfade 12s 0s infinite;
    }


    @-webkit-keyframes xfade{
     0%   { opacity:1; }
     19%  { opacity:1; }
     25%  { opacity:0; }
     94%  { opacity:0; }
     100% { opacity:1; }
    }

这个想法是整个序列需要12秒。

第一个循环看起来很棒，过渡很平滑，一切都像魅力一样。但是，随着第二个循环和任何其他循环的开始，它看起来并没有直接淡化到下一个图像，而是通过白色背景。你可以发现一个＆＃34; flash＆＃34;褪色。

你能帮帮我吗？我猜这个问题在这个百分比的某个地方，但我不确定。

谢谢

Answer 1

第一次迭代与其他迭代不同的原因是最初所有图像都具有不透明度1.（元素的初始值）在以下迭代中，它们是透明的（动画给出的值）

在此处查看，添加一个小偏移量，以便我所说的可见。

＆＃13;

figure {
    position: absolute;
    top: 0px;
    z-index: 1;
}

figure:nth-child(1) {
   -webkit-animation: xfade 12s 9s infinite;
}
figure:nth-child(2) {
    top: 20px;
   -webkit-animation: xfade 12s 6s infinite;
}
figure:nth-child(3) {
    top: 40px;
   -webkit-animation: xfade 12s 3s infinite;
}
figure:nth-child(4) {
    top: 60px;
   -webkit-animation: xfade 12s 0s infinite;
}


@-webkit-keyframes xfade{
  0% { opacity:1; }
  19% { opacity:1; }
  25% { opacity:0; }
  94% { opacity:0; }
  100% { opacity:1; }
}

＆＃13;

<div class="css-slideshow"> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/golf_woman_tee_216208.jpg"/> 
          </figure> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/picture_of_the_golf_11_168191.jpg"/> 
          </figure>
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/golf_picture_3_168179.jpg" /> 
          </figure> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/picture_of_the_evening_under_the_golf_course_168171.jpg" /> 
          </figure> 
    </div>

＆＃13;

如何修复它：

使用负值设置动画延迟。这样，第一次迭代将与其他迭代相同
缩小一个元素的淡出与以下淡入之间的差距。这已经完成了改变关键帧中的百分比

＆＃13;

figure {
    position: absolute;
    top: 0px;
    z-index: 1;
   -webkit-animation: xfade 12s infinite;
}

figure:nth-child(1) {
  -webkit-animation-delay: -3s;
}
figure:nth-child(2) {
  -webkit-animation-delay: -6s;
}
figure:nth-child(3) {
  -webkit-animation-delay: -9s;
}
figure:nth-child(4) {
   -webkit-animation-delay: 0s;
}


@-webkit-keyframes xfade{
  0% { opacity:1; }
  30% { opacity:1; }
  40% { opacity:0; }
  90% { opacity:0; }
  100% { opacity:1; }
}

＆＃13;

<div class="css-slideshow"> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/golf_woman_tee_216208.jpg"/> 
          </figure> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/picture_of_the_golf_11_168191.jpg"/> 
          </figure>
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/golf_picture_3_168179.jpg" /> 
          </figure> 
          <figure> 
                <img src="http://images.all-free-download.com/images/graphicmedium/picture_of_the_evening_under_the_golf_course_168171.jpg" /> 
          </figure> 
    </div>

＆＃13;

Answer 2

仔细阅读本教程（猜测你从那里获得了代码）：

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3

这应该完全回答你的问题。我知道这个教程可以完成你想要做的事情（跨浏览器，如果你从实际的演示中提取更完整的CSS）。

Answer 3

它是一种视错觉，你的代码运行正常。

对于这种确切的幻觉有一个术语，但是我不记得它是什么。

当一个物体在我们的周边视觉中发生变化时，它会被解释为突然闪现，以便我们立即注意到这种自发的外观＆＃34;。

如果用手遮住消失或出现的图像，那么它看起来就像一个非常流畅的动画。您还必须注意图像出现的位置，以免发生错觉。

第一次迭代的原因＆＃39;罚款是因为没有任何东西appearing因此光学错觉不会发生！

简单的CSS图像交叉褪色表现得很奇怪

3 个答案: