html - css中波浪动画从左到右的过渡

Question

大家好，我正在尝试通过在此处使用 svg 在 css 中制作波浪动画，大部分工作正常，但我确实有一个问题，一旦波浪到达终点，它会突然重新开始并且这种差异是清晰可见的，我想让过渡平滑以获得更好的用户界面，以便对用户来说，浪潮似乎是无穷无尽的。

请检查下面的代码片段以了解我的问题谢谢

.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 2000px;
  height: 198px;
  animation: wave 2s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1000px;
  }
}

<div class="wave"></div>
        

Answer 1

这可能会解决你的问题

如图所示，起点和终点的高度相同。

所以我将 wave div 的宽度增加到图像的两倍。并将 div 移动到图像的最末端，即 1920px 以消除波动。

body{overflow:hidden;}
.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 3840px;
  height: 198px;
  animation: wave 4s linear infinite;
  transform: translate3d(0, 0, 0);
  
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1920px;
  }
}

<div class="wave"></div>