Hi guys I am trying to make a wave animation in css by using an svg here, most of thing works fine but i do have one issue, once the waves reaches the end point, it starts over again all of a sudden and that difference is clearly visible, I want to make the transition smooth for better ui so that to user the wave seems to be endless.

大家好，我正试图用这里的一个SVG在CSS中制作一个波浪动画，大部分东西都运行得很好，但我确实有一个问题，一旦波浪到达终点，它突然又重新开始了，这种差异是显而易见的，我想让过渡变得顺畅，以便更好的用户界面，这样对于用户来说，波浪似乎是永无止境的。

Please check snippet below to understand my problem
Thanks

请查看下面的片段以了解我的问题，谢谢

.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>
        

This may solve your problem

这可能会解决你的问题

As you can see in the image, that the height of the Start point and the End point are the same.

正如您在图像中看到的，起点和终点的高度相同。

So I have increased the width of the wave div to the double of the image. and moved div to the very end point of the image which is 1920px to remove the fluctuation.

所以我把波纹的宽度增加到了图像的两倍。并将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>

This logic will work. But, you have to work on the SVG to match the starting point and ending points.

这一逻辑将会奏效。但是，您必须在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>
        

As pointed out above, the best approach is to adjust the SVG file directly to have matching starting and ending points.

如上所述，最好的方法是直接调整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>

To adjust the starting and ending points in your SVG path, open the SVG file in a code editor to see the XML. You can modify the d attribute of the <path> element.

若要调整SVG路径中的起点和终点，请在代码编辑器中打开SVG文件以查看XML。您可以修改 元素的d属性。

Example:

Your Original SVG:

<path d="M0,0 C135.180854,0 182.771453,50 352.112272,50 C476.394096,50 557.790605,19.606846 751.782984,19.606846 C945.775364,19.606846 984.663736,50 1111.36509,50 C1375.56035,50 1635.95781,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="nonzero"></path>

Modified SVG (with simplified adjustments):

<path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>

• The original SVG had multiple control points (C commands) to define curves in the path. In the modified SVG, I simplified these curves by adjusting the coordinates of the control points while keeping the same number of control points.

  原始的SVG有多个控制点(C命令)来定义路径中的曲线。在改进的SVG中，我通过调整控制点的坐标来简化这些曲线，同时保持控制点的数量不变。

  
  



• I also changed the fill-rule attribute of the `1 element from "nonzero" to "evenodd". This determines how the path fills in case it overlaps itself.

  我还将`1元素的填充规则属性从“非零”更改为“奇数”。这决定了路径在与自身重叠的情况下如何填充。

  
  



• Feel free to change the fill color too by adjusting the fill attribute of the <path> element.

  您也可以通过调整 元素的Fill属性来随意更改填充颜色。

  
  

Full Modified SVG XML:

<svg width="1920px" height="200px" viewBox="0 0 1920 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>2/1@svg</title>
    <g id="2/1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>
    </g>
</svg>