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幻燈片已經損壞和模糊輸出

回答

相關問題