帶連續滑動動畫的CSS3圖像滑塊

我試圖用無限連續的滑動動畫創建純css3圖像滑塊。我能夠使用CSS3進行動畫製作，但是在上一張幻燈片結束時遇到了一個小問題。在上一張幻燈片後，它突然跳到沒有css3平滑變換效果的第一張幻燈片。任何簡單的方法來解決這個問題？下面是代碼帶連續滑動動畫的CSS3圖像滑塊

#slideshow{ 
position: relative; 
width: 200px; 
height: 400px; 
overflow: hidden; 
border: 5px solid #fff;} 
#slideshow img{ 
position: absolute; 
left: 0; 
top: 0; 
animation: slide 5s infinite; 
} 
@keyframes slide{ 
0%{ transform:translateX(0px) } 
33%{ transform:translateX(-200px) } 
66%{ transform:translateX(-400px) } 
100%{ transform:translateX(-600px) } 
} 

<div id="slideshow"><img src="http://oi67.tinypic.com/24mia39.jpg"></div>

jsFiddle link

來源

2016-04-28 Prasad

你沒有動畫最後一面後，因爲您的動畫完成。也許增加一個轉換效果，如：

@keyframes slide{ 
    0%{ transform:translateX(0px) } 
    25%{ transform:translateX(-200px) } 
    50%{ transform:translateX(-400px) } 
    75%{ transform:translateX(-600px) } 
    100%{ transform:translateX(0px) } 
}

jsFiddle link

來源

2016-04-28 12:48:56

感謝您的答覆。這我已經嘗試過了。其實我需要連續循環動畫。現在在上一次滑動之後，它一直回到第一張幻燈片，這不是我所期待的。 – Prasad

帶連續滑動動畫的CSS3圖像滑塊

回答

相關問題