CSS3幻灯片已损坏且输出模糊

Question

下面的CSS控制着我的3张图片幻灯片的时间：

.slideshow li:child(1) span { 
    background-image: url(../../pic/bg1.jpg); 
}
.slideshow li:child(2) span { 
    background-image: url(../../pic/bg2.jpg);
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
}
.slideshow li:child(3) span { 
    background-image: url(../../pic/bg3.jpg);
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
}

我所面临的问题是，当从一个图像过渡到另一个图像时，图像是相互重叠的，这会导致一个质量很差的幻灯片，有时它会被卡住并停止滑动。我应该在代码中添加其他内容吗？

Answer 1

我想我以前也遇到过类似的案子。重叠图像的问题可能是由于没有定义“不透明”参数。而所谓“不透明度”，我的意思是，即使你当前的CSS控制动画延迟，它也应该控制每个图像的“不透明度”的时间，因此它给人淡入和退出的感觉，然后重新正确地重新启动。因此，从上面的CSS中，整个幻灯片周期是16秒；现在，我们知道第二个图像将在第8秒开始动画，我们必须知道在动画的哪个百分位数，这将需要第一个图像淡出。除以8乘以16，我们得到0.5 %或50%。现在，从视觉上看，花那么多时间淡入是不可能的，所以我们取一半的值，也就是25%。然后，我们开始把它从50%降到75%完全消失。上面的操作可以使用CSS "@keyframes“属性来完成，如下所示：

{
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-      function: ease-in;}
25% { opacity: 1; animation-timing-function: ease-out;}
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}

如果成功的话请告诉我们。