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>
        

- Ratnabh kumar rai

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>

- Abhishek Pandey

Answer 2

这个逻辑是可行的。但是，你需要在SVG上工作，以匹配起始点和结束点。

.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.36, 0.36, 0.36) infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 5000% 0; 
  }
}

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

- Sunny Vaghadia

---

它仍然有一点闪烁。 - Debsmita Paul

@DebsmitaPaul - 它在闪烁。因为SVG本身具有不同的端点。如果您仔细阅读我的标题，我已经提到了同样的改进点。 - Sunny Vaghadia

Answer 3

如上所述，最佳方法是直接调整SVG文件，使其具有匹配的起始点和结束点。

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

.wave {
  background: url("https://raw.githubusercontent.com/scottgriv/River-Charts/main/static/assets/wave.svg") repeat-x;
  position: absolute;
  bottom: 0;
  width: 3840px;
  height: 198px;
  opacity: 1;
  animation: wave 4s linear infinite;
  transform: translate3d(0, 0, 0);
}

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

要调整SVG路径中的起始点和结束点，请在代码编辑器中打开SVG文件以查看XML。您可以修改

- griv