Javascript 如何在jQuery中无限水平滚动图像？

我正在尝试将2个图像1层叠在另一个图像上，并使用jQuery使它们无限滚动。我能够使图像滚动和层在CSS，但动画变得非常急促。如何使用jQuery在图像上创建无限水平滚动并保持动画平滑

到目前为止，我的代码是：

CSS:

和HTML：

<div id="animate-area"></div>
<div id="animate-area2"></div>

---

检查一下。也许你会喜欢的

基本上只是使用了平移而不是背景位置

@keyframes animatedBackground {
 from { transform: translateX(0); }
 to { transform: translateX(100%); }
}

---

只要按您的意愿调整速度。

检查一下。也许你会喜欢的

基本上只是使用了平移而不是背景位置

@keyframes animatedBackground {
 from { transform: translateX(0); }
 to { transform: translateX(100%); }
}

只需根据您的意愿调整速度。

更改速度

@keyframes animatedBackground {
   from { background-position: 0 0; }
   to { background-position: 100% 0; }
}

致：

片段：

正文{
背景色：黑色；
}
@关键帧动画背景{
从{背景位置：-100%0；}
到{背景位置：100%0；}
}
#动画区域{
宽度：100vw；
高度：100vw；
背景图片：url(http://oi64.tinypic.com/2r7ri29.jpg);
背景位置：0px 0px；
背景重复：重复-x；
位置：绝对；z指数：-2；
动画：动画背景135s线性无限；
}
#动画-区域2{
宽度：100vw；
高度：100vw；
背景图片：url(http://oi67.tinypic.com/2niy905.jpg);
位置：绝对；z指数：-1；
背景重复：重复-x；
位置：相对位置；
动画：动画背景80线性无限；
}

更改您的

@keyframes animatedBackground {
   from { background-position: 0 0; }
   to { background-position: 100% 0; }
}

致：

片段：

正文{
背景色：黑色；
}
@关键帧动画背景{
从{背景位置：-100%0；}
到{背景位置：100%0；}
}
#动画区域{
宽度：100vw；
高度：100vw；
背景图片：url(http://oi64.tinypic.com/2r7ri29.jpg);
背景位置：0px 0px；
背景重复：重复-x；
位置：绝对；z指数：-2；
动画：动画背景135s线性无限；
}
#动画-区域2{
宽度：100vw；
高度：100vw；
背景图片：url(http://oi67.tinypic.com/2niy905.jpg);
位置：绝对；z指数：-1；
背景重复：重复-x；
位置：相对位置；
动画：动画背景80线性无限；
}

gaetanoM，这不是问题所在。问题在于使用

%

。此

%

不是指背景大小，而是指元素大小。因此，只有当元素与背景具有相同的宽度时，它才会起作用。这是一个需要解决的棘手问题。在一定的w/h比率范围内，

背景尺寸：封面

有效，如果你知道如何剪裁背景。@AndreiGheorghiu非常感谢你提供的信息。它非常珍贵。再次感谢这不是问题，盖特纳姆。问题在于使用

%

。此

%

不是指背景大小，而是指元素大小。因此，只有当元素与背景具有相同的宽度时，它才会起作用。这是一个需要解决的棘手问题。在一定的w/h比率范围内，

背景尺寸：封面

有效，如果你知道如何剪裁背景。@AndreiGheorghiu非常感谢你提供的信息。它非常珍贵。再次感谢