CSS3幻灯片已经损坏和模糊输出

的下面CSS控制我的3个图像的定时幻灯片：CSS3幻灯片已经损坏和模糊输出

.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; 
}

我面对完全问题是，图像被重叠时，它的时间相互用于从过渡一个图像到下一个，这是导致质量差的幻灯片，有时会卡住，停止滑动。我应该添加别的东西给我的代码吗？

来源

2014-12-27 Laura Lecharpentier

嗨，你可以把演示放在http://jsfiddle.net/？ –

我想我以前遇到过类似的情况。这里重叠图像的问题可能是由于“不透明度”参数未被定义。而“不透明”是指即使您当前的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 } 
}

让我们知道，如果它的工作原理。

来源

2014-12-27 08:58:13

CSS3幻灯片已经损坏和模糊输出

回答

相关问题