CSS3動畫幻燈片

得到一個小的img幻燈片運行與動畫/關鍵幀，它有4個圖像在24s無限循環運行6秒，問題是，當它運行一次，過渡很好，一旦它有通過4個圖像並重復，圖像淡出2-3秒後，下一個圖像淡入。CSS3動畫幻燈片

第一次使用動畫和關鍵幀，所以我不是100％我做了什麼錯誤。幻燈片放映在名爲.slideshow 我取出最前綴空間和可讀性DIV運行：

/* CSS */ 


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

@keyframes "xfade" { 
0% { 
    opacity: 1; 
} 
14% { 
opacity: 1; 
} 
16% { 
    opacity: 0; 
} 
90% { 
    opacity: 0; 
} 
100% { 
    opacity: 1; 
} 
}

沒有重複，具有帶環精爲先24S單圖像幻燈片的問題，然後一大2-3影像後，每次差距..

來源

2015-05-26 joshuaaron

任何人都灑了一些光？ – joshuaaron

[Smooth Infinite Scrolling Banner \ [CSS Only \]]可能重複（http://stackoverflow.com/questions/30032646/smooth-infinite-scrolling-banner-css-only） –

@SergeyDenisov根本不重複..我遇到了4張圖片幻燈片的問題，這些幻燈片可以在頭24s內循環播放，然後在圖片淡出之前有2-3秒的間隔，直到下一次消失後再循環一次... – joshuaaron

嘗試改變xfade動畫

@keyframes "xfade" { 
    0% { 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    26% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
}

從邏輯上講，因爲圖像是4週期應爲25％，

來源

2015-05-27 22:42:25 maioman

非常感謝，我不知道你必須以幻燈片的數量來分隔它，似乎在接近完美的情況下工作，除了最後一次跳躍之外，其衰減非常小。 – joshuaaron

CSS3動畫幻燈片

回答

相關問題