More smooth CSS animation-CodePudding

So I have this wave animation, but when it restarts its very noticeable. Is there a way to make this animation more smooth, so it just loops, without noticing that it restarted the animation?

Here is the wave animation:

/* for the pen */
html, body {
  margin: 0;
  min-height: 100%;
  background-color: #f2f2f2;
}

/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg xml,");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Note: start the animation and wait a little while looking at it, and you will see the restart of the animation is not smooth. The three waves restarts at three different times, 10s, 18s and 20s.

CodePudding user response：

Just add another @Keyframe and update time duration in CSS. I just update all changes in below code snippet and I hope it'll help you out. Thank You

/* for the pen */
html, body {
  margin: 0;
  min-height: 100%;
  background-color: #f2f2f2;
}

/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg xml,");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 15s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 20s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 25s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    25% {transform: translateX(-25%);}
    50% {transform: translateX(-50%);}
    75% {transform: translateX(-25%);}
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>