Transition of wave animation in css from left to right

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( repeat-x; 
  position: absolute;
  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>

Read more here:

Content Attribution

This content was originally published by Ratnabh kumar rai at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: