Html 问题：使用img获得无缝的字幕效果可以工作，但它会明显地重新启动

几天来，我一直在尝试使用雾图像的字幕效果。我尝试了几个教程（视频和书面教程），但效果一直明显地跳过/重新启动，而且效果不是无缝的。图像本身为1000px宽，可循环。两个雾图像不同，以不同的速度移动以获得更好的效果

在另一个教程的帮助下，我确实设法让它与文本一起工作，但img版本仍然存在问题。澄清一下：显示图像时，图像会正确移动，但在某个时候动画会重新启动/跳过/跳跃，而不是无缝地重复图像

我的当前版本如下所示（它是一个vue项目）：

.fog容器{
排名：0；
身高：100%；
溢出：隐藏；
位置：绝对位置；
宽度：100%；
z指数：0；
}
.fog img{
身高：100%；
位置：绝对位置；
宽度：300vw；
}
.先给我雾气{
动画：字幕120s线性无限；
背景位置：中心；
背景重复：重复；
背景尺寸：包含；
}
.fog img秒{
动画：字幕60s线性无限；
背景位置：中心；
背景尺寸：包含；
背景重复：重复；
}
@关键帧选框{
0% {
变换：translate3d（0,0,0）；
}
100% {
变换：translate3d（-200vw，0，0）；
}
}