Javascript 有什么方法可以使我的背景图像具有滚动/类似字幕类型的效果？

我尝试了很多不同的方法来使用动画关键帧。我似乎做不到

我基本上希望我的背景动画从左到右，并重复，像一个字幕，但作为我的背景

对我来说，唯一的解决办法似乎是为我的背景制作一张gif，但这对我来说确实是一个耗时的过程。

试试这个

#设置区域动画{
宽度：560px；
高度：400px；
背景图像：url（'http://labs.designoptimizer.net/snip/bg-clouds.png');
背景位置：0px 0px；
背景重复：重复-x；
动画：动画背景40秒线性无限；
}
@关键帧动画背景{
从{背景位置：0；}
到{背景位置：100%0；}
}

试试这个

#设置区域动画{
宽度：560px；
高度：400px；
背景图像：url（'http://labs.designoptimizer.net/snip/bg-clouds.png');
背景位置：0px 0px；
背景重复：重复-x；
动画：动画背景40秒线性无限；
}
@关键帧动画背景{
从{背景位置：0；}
到{背景位置：100%0；}
}

---

使用动画关键帧使其工作

.background{
背景：url(https://dummyimage.com/1500x700/);
宽度：560px；
高度：400px；
背景位置：0px 0px；
背景重复：重复-x；
背景尺寸：封面；
动画：动画返回2s线性无限；
}
@关键帧动画返回{
从{背景位置：0；}
到{背景位置：200%0；}
}

---

使用动画关键帧使其工作

.background{
背景：url(https://dummyimage.com/1500x700/);
宽度：560px；
高度：400px；
背景位置：0px 0px；
背景重复：重复-x；
背景尺寸：封面；
动画：动画返回2s线性无限；
}
@关键帧动画返回{
从{背景位置：0；}
到{背景位置：200%0；}
}

---

为了避免动画中的跳跃（一旦它到达终点并再次开始），我将使用

repeat-x

将图像移动到x坐标的指定数量，如下所示：

html{
边距：0；填充：0；高度：100%；
}
身体{
身高：100%；
背景图片：url(https://i.imgur.com/aCDecXL.jpg);
背景尺寸：自动100%；
溢出：隐藏；
背景重复：重复-x；
动画：滚动70万次无限线性；
}
@关键帧滚动{
从{背景位置：0%；}
至{背景位置：90000000%；}
}

为了避免动画中的跳跃（一旦它到达终点并再次开始），我将使用

repeat-x

将图像移动到x坐标的指定数量，如下所示：

html{
边距：0；填充：0；高度：100%；
}
身体{
身高：100%；
背景图片：url(https://i.imgur.com/aCDecXL.jpg);
背景尺寸：自动100%；
溢出：隐藏；
背景重复：重复-x；
动画：滚动70万次无限线性；
}
@关键帧滚动{
从{背景位置：0%；}
至{背景位置：90000000%；}
}

非常感谢，现在这更有意义了，非常感谢，现在这更有意义了