html - svg 无限波动画

Question

我试图让我的 SVG 波无限，但我遇到了端点不会相遇的问题。就像波浪永远持续一样，但您可以清楚地看到 svg 的截止点。

* HTML

     <div class="nav-image">
        <h1 class="navdescriptionfirst animate__animated animate__fadeInDown ">Post</h1>
        <h1 class="animate__animated animate__fadeInDown animate__delay-1s">Find</h1>
        <h1 class="animate__animated animate__fadeInDown animate__delay-2s">Trade</h1>
        <img id="wave" src="wave.svg">
    </div

CSS

.nav-image {
  background-color: var(--color-one);
  padding-top: 100px;
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
 
}

.nav-image img {
  width: 200%;
  height: 50%;
  position: absolute;
  animation: wave linear 20s infinite;
  bottom: 0;
}

@keyframes wave {
  0% {
    transform: translate(-50%)
  }
  100% {
    transform: translate(0);
  }
}

链接到带有完整代码的 repl

我已经使动画速度更快，以便您可以在端点不相遇时看到我的意思。

我应该改变什么让他们相遇或看起来无限？

标签： htmlcsssvg