Html 从中心开始的无限水平动画

我有一个背景（云），我想水平设置它的动画。如果我从最左边的位置开始动画，则动画是平滑的，但如果我从中心开始动画，动画将变得突然

我知道它为什么会这样，但却不知道如何使它顺利进行

从中间开始时，请参见“打开”按钮：

.trt-clouds-1{
宽度：100vw；
高度：200px；
背景图像：url（'https://image.flaticon.com/icons/svg/414/414927.svg');
背景重复：无重复；
背景尺寸：10vw；
动画：动画背景4s线性无限；
}
@关键帧动画背景{
从{
背景位置：30vw 0；
}
到{
背景位置：100vw 0；
}
}

解决方案1：并不令人惊讶 根据您对“平滑”的定义（即，从右边出来，从左边出来），您可以添加额外的断点。只需确保设置正确的百分比计时，使其在到达右边缘之前和之后以相同的速度行驶即可

如果你在右边缘和左边缘之间跳得足够快，它应该显示得很平滑

body，html{
溢出：隐藏；
}
.trt-clouds-1{
宽度：100vw；
高度：200px；
背景图像：url（'https://image.flaticon.com/icons/svg/414/414927.svg');
背景重复：无重复；
背景尺寸：10vw；
动画：动画背景4s线性无限；
}
@关键帧动画背景{
0% {
背景位置：30vw 0；
}
63.6% {
背景位置：100vw 0；
}
63.6000001% {
背景位置：-10vw 0；
}
100% {
背景位置：30vw 0；
}
}

html，正文{
溢出：隐藏；
}
.trt-clouds-1{
宽度：100vw；
高度：200px；
背景位置：0；/*或者您可以添加-10vw 0，以便在开始加载时查看更灵活*/
背景图像：url（'https://image.flaticon.com/icons/svg/414/414927.svg');
背景重复：无重复；
背景尺寸：10vw；
动画：动画背景4s线性无限；
动画延迟：0；
}
@关键帧动画背景{
0% {
背景位置：-10vw 0；
}
100% {
背景位置：100vw 0；
}
}

---

另一个技巧是依靠一定的百分比优化动画，如下所示

.trt-clouds-1{
高度：200px；
背景图像：url（'https://image.flaticon.com/icons/svg/414/414927.svg');
背景重复：无重复；
背景尺寸：钙（200%+10vw）10vw；
动画：动画背景4s-2s线性无限；
}
@关键帧动画背景{
从{
背景位置：右上角；
}
}

---

@欢迎光临！我想这可能也会派上用场——等几分钟，如果可行的话，我也会把这个添加到我的答案中。这并没有回答OP的问题，这是关于从中间开始制作平滑动画的问题。（看起来您还复制了我的代码片段，只更改了

动画延迟

——为什么？）从中间开始平滑的确切含义是什么？是的，我把它改成了我认为更好更简单的方式，OP的帖子中的这句话：“理想情况下，它应该从中心开始，然后应该到最右边的点，然后从最左边的点出来，继续到达中心。”他从中锋开始有困难。我不知道为什么会这样！！