带连续滑动动画的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图像滑块

回答

相关问题