Javascript css背景图像动画的优化/替代

我需要有一整页的背景图像，从右到左缓慢地平移，并无限重复。这是我的css：

#动画背景{
变换：translateZ（0）；
-webkit转换：translateZ（0）；
-ms变换：translateZ（0）；
改变：转变；
/*变换：translate3d（0,0,0）*/
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景：url（“https://i.stack.imgur.com/WmL0s.jpg");
背景重复：重复；
背景位置：0；
背景尺寸：自动100%；
动画：动画背景1000秒线性无限；
}
@关键帧动画背景{
从{
背景位置：0；
}
到{
背景位置：-10000px0；
}
}

---

问题来自

背景位置

——在某些情况下，这将由cpu处理。 如果通过在div中添加占位符元素将其调整为使用transform，则性能应该会提高：

基本思想：
在第一个div中添加包装，而不是设置背景位置的动画。
使用transform设置此包装器的动画，因为转换将由gpu处理

#动画背景{
身高：100%；
宽度：100%；
位置：绝对位置；
溢出：隐藏；
变换：translate3d（0,0,0）；
}
#动画背景>div{
身高：100%；
宽度：2526px；
背景：url(https://wallpaperbrowse.com/media/images/4643298-images.jpg);
背景尺寸：包含；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
变换：translate3d（0,0,0）；
动画：moveSlideshow 12s线性无限；
}
@关键帧移动幻灯片放映{
100% { 
转化：translateX（-66.6666%）；
}
}

你能用与你遇到问题的真实图像尺寸相似的真实图像建立一个例子吗？这里是：在这个例子中，动画不是无限的，但过一段时间就会变成白色，这是故意的吗？在我的示例中，我现在将其设置为无限，但如果您愿意，我也可以将其更改为有限。有趣的是，我得到了完全相反的结果，我的代码显示了无缝动画，其中您的动画在循环之前以空白结束。事实上，我需要找到一种方法让它真正无穷无尽：我编辑了我的问题。