Css 以恒定速度响应背景滚动

我想使用带有滚动背景图像的响应div

在这个例子中，我展示了它的大小。我希望整个滚动是恒定的-因此小div应该花费x秒，大div也应该花费x秒（而不是小div比大div花费更少的时间来完成整个图像平移）

我尝试在background-position-x中使用百分比值，但它会停止动画

.offset{
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
背景大小：100%；
动画：slideLeft768px 5s线性无限；
}
.1分部{
宽度：76.8px；
高度：57.6px；
}
.第2分部{
宽度：768px；
高度：576px；
}
@关键帧slideLeft768px{
0% {
背景位置x:768px；
}
100% {
背景位置x:0px；
}
}

<代码> > p>可以考虑CSS变量使动画动态化：


.offset{
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
背景大小：100%；
动画：slideLeft768px 5s线性无限；
宽度：var（--p）；
}
.1分部{
--p:76.8px；
高度：57.6px；
}
.第2分部{
--p:768px；
高度：576px；
}
@关键帧slideLeft768px{
0% {
背景位置：var（--p，0px）0px；
}
100% {
背景位置：0px 0px；
}
}
诀窍是使用百分比作为背景位置。由于将背景大小设置为100%使这不可能，因此我们需要将其设置为另一个值

一个技巧是使用填充物。创建与宽度相同尺寸的右侧填充。将背景原点设置为paddin框，并剪辑内容框，现在我们可以将大小设置为50%。从视觉上看，一切都不会改变。（如果额外的填充有问题，可以设置负边距或剪辑路径）。现在，背景位置可以按百分比移动：


.offset{
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
背景大小：50%；
背景来源：边框框；
背景剪辑：内容框；
动画：slideLeft768px 5s线性无限；
}
.1分部{
宽度：76.8px；
右侧填充：76.8px；
高度：57.6px；
}
.第2分部{
宽度：768px；
右边填充：768px；
高度：576px；
}
@关键帧slideLeft768px{
0% {
背景位置x:100%；
}
100% {
背景位置x:0%；
}
}

我喜欢这个把戏。我们也可以考虑伪元素，通过隐藏溢出，我们可以很容易地去掉额外的空间：嗨，我想在div中使用一个边框，所以我不能使用这个方法。谢谢。我不知道像这样的CSS变量。它似乎有很好的浏览器支持（我将使用Cordova）。谢谢你的链接和你的高级代码。