Html bannermove的第一个img不直接跟随bannermove的最后一个img

我使用以下代码创建bannermove：

.photobanner{
高度：233px；
宽度：3550px；
边缘底部：5px；
字号：0；
}
.摄影旗帜{
边缘底部：10px；
右边距：5px；
高度：233px；
宽度：350px；
}
.摄影旗帜{
过渡：所有0.5s缓解；
}
.首先{
动画：bannermove 30s线性无限；
}
@关键帧横幅移动{
0% {
左边距：0px；
}
100% {
左边距：-2130px；
}
}

我想你的意思是学习教程。关键的一句话是：

我们需要做的是使第一帧与最后一帧完全匹配

<> P>为此，您必须添加更多的图像，这样它们将占据空白。

.photobanner{
高度：233px；
宽度：3550px；
边缘底部：5px；
字号：0；
}
.摄影旗帜{
边缘底部：10px；
右边距：5px；
高度：233px；
宽度：350px；
}
.摄影旗帜{
过渡：所有0.5s缓解；
}
.首先{
动画：bannermove 10s线性无限；
}
@关键帧横幅移动{
0% {
左边距：0px；
}
100% {
左边距：-1775px；
}
}

可能的重复：（无重复）我尝试使用您的解决方案：它似乎可行，但当JSFIDLE中的动画达到700x100时，它会更改图像并“跳”回第一个。有没有一种方法可以使这一过程更加平滑而不出现“跳跃”？你必须记住关键的一句话：

我们需要做的是使第一帧与最后一帧完美匹配。因此，复制
.photobanner
，将其
左边距
设置为您在
bannermove
动画中定义的最终值，并确保其外观相同（除了左侧图像的边缘）。告诉我它是怎么回事。我尝试了你的解决方案，但还是没能成功：-（你知道我的错误在哪里吗：你没有像我一样添加幻灯片（教程也这么做了）.我刚把你的小提琴修好了：但是试着去理解它的原理。啊，好的。现在，我把你的小提琴和我的小提琴进行了比较，我明白了重点。非常感谢你的补充解释，并帮助我了解这个原理是如何工作的。