Transition of wave animation in css from left to right

user_10182953 0
Viewed 2521

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.

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>

css html
2 Answers

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.

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>

user_66707230

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

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

user_99073340
Related