带有连续幻灯片动画的 CSS3 图像滑块答案

【问题标题】：CSS3 image slider with continuous slide animation带有连续幻灯片动画的 CSS3 图像滑块
【发布时间】：2016-04-28 12:35:48
【问题描述】：

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

【问题讨论】：

标签： css slider

【解决方案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

【讨论】：

感谢您的回复。这个我已经试过了。其实我需要连续循环动画。现在，在最后一张幻灯片之后，它一直移动到第一张幻灯片，这不是我要找的。span>