CSS Animation Wave effect with 3 layers-CodePudding

I'm trying to create a wave animation with 3 layers. The animation as you can see in the snippet, doesn't seem smooth, and it seems like the waves aren't endless. Besides I can't really get to see the waves structure like in the picture.

I would to see the waves without interruption, when it comes to the end of the animation, it is clearly noticeable that the animation has ended. [![

.w1 {
  stroke: none;
  fill: #b3696c;
  opacity: 55%;
  animation: move1 4.5s linear infinite;
}
.w2 {
  stroke: none;
  fill: #b3696c;
  opacity: 35%;
  transform: translate3d(0, 0, 0);
  animation: move2 4.5s linear infinite;
}
.w3 {
  stroke: none;
  fill: #cf2127;
  opacity: 30%;
  transform: translate3d(0, 0, 0);
  animation: move3 2s linear infinite;
}
@keyframes move1 {
  0% {
    transform: translateX(-500px) scaleX(2.5);
  }
  50% {
    transform: translateX(-100) scaleX(2.5);
  }
  100% {
    transform: translateX(0) scaleX(2.5);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(-600px) scaleX(3);
  }
  50% {
    transform: translateX(-100) scaleX(2.5);
  }
  100% {
    transform: translateX(0) scaleX(3);
  }
}
@keyframes move3 {
  0% {
    transform: translateX(-800px) scaleX(4);
  }
  50% {
    transform: translateX(-100) scaleX(2.5);
  }
  100% {
    transform: translateX(0) scaleX(4);
  }
}

<div >
      <svg viewBox="0 0 500 150" preserveAspectRatio="none">
        <path
          
          d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
        />
        <path
          
          d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
        />
        <path
          
          d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
        />
      </svg>
    </div>

CodePudding user response：

The wave animations should move smoothly, so instead of using the linear attribute, we use ease-in-out.

.w1 {
    stroke: none;
    fill: #b3696c;
    opacity: 55%;
    animation: move1 5s ease-in-out infinite;
  }
  .w2 {
    stroke: none;
    fill: #b3696c;
    opacity: 35%;
    transform: translate3d(0, 0, 0);
    animation: move2 4s ease-in-out infinite;
  }
  .w3 {
    stroke: none;
    fill: #cf2127;
    opacity: 30%;
    transform: translate3d(0, 0, 0);
    animation: move3 6s ease-in-out infinite;
  }
  @keyframes move1 {
    0% {
      transform: translateX(-500px) scaleX(2.5);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(2.5);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-500px) scaleX(2.5);
    }
  }
  @keyframes move2 {
    0% {
      transform: translateX(-600px) scaleX(3);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(3);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-600px) scaleX(3);
    }
  }
  @keyframes move3 {
    0% {
      transform: translateX(-800px) scaleX(3);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(3);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-800px) scaleX(3);
    }
  }

<div >
  <svg viewBox="0 0 500 150" preserveAspectRatio="none">
    <path
    
    d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
    />
    <path
    
    d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
    />
    <path
    
    d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
    />
  </svg>
</div>

CodePudding user response：

Here is my solution, I hope it helps you.

.w1 {
    stroke: none;
    fill: #b3696c;
    opacity: 55%;
    animation: move1 6s linear infinite;
  }
  .w2 {
    stroke: none;
    fill: #b3696c;
    opacity: 35%;
    transform: translate3d(0, 0, 0);
    animation: move2 6s linear infinite;
  }
  .w3 {
    stroke: none;
    fill: #cf2127;
    opacity: 30%;
    transform: translate3d(0, 0, 0);
    animation: move3 2s linear infinite;
  }
  @keyframes move1 {
    0% {
      transform: translateX(-500px) scaleX(2.5);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(2.5);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-500px) scaleX(2.5);
    }
  }
  @keyframes move2 {
    0% {
      transform: translateX(-600px) scaleX(3);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(3);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-600px) scaleX(3);
    }
  }
  @keyframes move3 {
    0% {
      transform: translateX(-800px) scaleX(3);
    }
    25% {
      transform: translateX(-100) scaleX(2.5);
    }
    50% {
      transform: translateX(0) scaleX(3);
    }
    75% {
      transform: translateX(-100) scaleX(2.5);
    }
    100% {
      transform: translateX(-800px) scaleX(3);
    }
  }

<div >
  <svg viewBox="0 0 500 150" preserveAspectRatio="none">
    <path
    
    d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
    />
    <path
    
    d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
    />
    <path
    
    d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
    />
  </svg>
</div>