问题：通过img获得无缝字幕效果，但可见重启

如何解决问题：通过img获得无缝字幕效果，但可见重启

我一直在尝试使带有雾状图像的字幕效果工作几天。我尝试了一些教程（视频和书面教程），但效果明显保持跳过/重新启动，效果不是无缝的。图片本身为1000像素宽，可以循环播放。这两个雾图像不同，并且以不同的速度移动，效果更好。

在另一个教程的帮助下，我确实设法使它与文本配合使用，但是img版本仍然存在问题。需要说明的是：显示的图像可以正确移动，但有时动画会重新启动/跳过/跳转，而不是无缝地重复图像。

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

.fog-container {
    top: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
 }
  
.fog-img {
    height: 100%;
    position: absolute;
    width: 300vw;
}
  
.fog-img-first {
    animation: marquee 120s linear infinite;
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}
  
.fog-img-second {
    animation: marquee 60s linear infinite;
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
}
  
@keyframes marquee {
    0% {
      transform: translate3d(0,0);
    }
  
    100% {
      transform: translate3d(-200vw,0);
    }
}

<v-main>
  <div class="fog-container">
    <div
      :style="{'background-image':     
        `url(${require('./assets/pictures/background/fog_1.png')})`}"
      class="fog-img fog-img-first"
    />
    <div
      :style="{'background-image': 
        `url(${require('./assets/pictures/background/fog_2.png')})`}"
      class="fog-img fog-img-second"
    />
  </div>
</v-main>