所以我有这个波浪影片，但是当它重新启动时它非常明显。有没有办法让这个影片更流畅，所以它只是回圈，而不注意到它重新启动了影片？

这是波浪影片：

/* 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 class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>

注意：启动影片稍等片刻，你会看到影片的重启并不顺畅。三波在三个不同的时间重新开始，10 秒、18 秒和 20 秒。

uj5u.com热心网友回复：

只需在 CSS 中添加另一个@Keyframe并更新持续时间。我只是更新了下面代码片段中的所有更改，希望对您有所帮助。谢谢

/* 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 class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>