Safari - 线性动画中的白色间隙

Question

我在 Safari 上处理动画时遇到困难 - 它在其他地方都工作正常，但 Safari 上的线性循环动画中存在这些白色间隙。我尝试了不同的方法，例如设置 -webkit-perspective 或 transform3d- 但似乎都不起作用。我错过了什么？

.animation-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: space-between;
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.animation-waves {
  height: 14vw;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  animation: fadein 4s;
  perspective: 1000;
  backface-visibility: hidden;
}

.animation-waves-item {
  width: 400%;
  transform: translate(-4%);
  background-size: auto 230%;
  background-repeat: repeat-x;
  position: absolute;
  height: 100%;
  animation: splash-wave 50s -3s linear infinite;
  opacity: 0.8;
  perspective: 1000;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='800' height='209' xmlns='http://www.w3.org/2000/svg'  version='1.1'%3e%3cg%3e%3ctitle%3eLayer 1%3c/title%3e%3cpath id='svg_1' fill='red' clip-rule='evenodd' fill-rule='evenodd' d='m721.33335,44.87378c0,0 0,0 0,0c-4.88889,-1.61705 -9.77778,-2.82984 -14.66667,-4.44689c0,0 0,0 0,0c0,0 0,0 0,0l0,0c-12.66667,-3.63836 -25.33333,-7.68099 -38.22222,-10.91509c0,0 0,0 0,0c-125.55556,-34.36232 -255.55556,-48.91578 -444.00001,13.74493c0,0 -9.33333,2.42558 -24.44445,6.06394c-92.88889,19.40461 -153.11112,18.19182 -181.33334,15.76624c-6.44444,-0.80853 -12.66667,-1.61705 -18.66667,-2.42558l0,145.93881l800.00002,0l0,-138.66208l0,-7.68099c-33.77778,-5.25541 -62.44445,-12.53214 -78.66667,-17.38329z' class='st0'/%3e%3c/g%3e%3c/svg%3e")
}

@keyframes splash-wave {
  0% {
    transform: translateX(-4%) translateZ(0);
  }
  50% {
    transform: translateX(-20%) translateZ(0);
  }
  100% {
    transform: translateX(-35%) translateZ(0);
  }
}

<div class="container">
  <div class="animation-wrapper">
    <div class="animation-waves">
      <div class="animation-waves-item">fds</div>
      <div class="animation-waves-item">fs</div>
    </div>
  </div>
</div>

Answer 1

您只能使用 CSS 来创建波浪。我有一个在线生成器，还有一篇详细的文章以及

.wave {
   position: fixed;
   inset: auto 0 0;
   height: 200px;
   background: red;
  --mask:
    radial-gradient(127.28px at 50% 180.00px,#000 99%,#0000 101%) 50% 0/360px 100%,
    radial-gradient(127.28px at 50% -90px,#0000 99%,#000 101%) calc(50% + 180px) 90px/360px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  animation: move 2s linear infinite;
}
@keyframes move {
  to {
    -webkit-mask-position:
      calc(50% - 360px) 0,
      calc(50% - 180px) 90px
  }
}

<div class="wave"></div>