Question

我试图创建一个带有无限连续幻灯片动画的纯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

Answer 1

在最后一面之后你没有动画，因为你的动画完成了。也许添加一个转换效果，如：

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

jsFiddle link

具有连续幻灯片动画的CSS3图像滑块

1 个答案: