ios - Safari 上的 CSS 动画错误

Question

我在 Safari 上有一个 CSS 动画错误，我创建的波浪动画没有按预期运行。

下面是我的动画关键帧:

@keyframes wave {
  20% {
    transform: translateY(-18px);
  }
  0%,
  40%,
  100% {
    transform: initial;
  }
}

我为它制作了一支笔 - https://codepen.io/ikhazen/pen/BXdqrN 它在其他浏览器中的行为与预期一致，但在 Safari iPhone 6s 上则不然。

解释我的 iPhone 上发生了什么。 前三个点同时动画，然后是第 4 个和第 5 个点。似乎 animation-delay 属性不是很好用。 有时，我注意到所有的点都在同时动画。这很奇怪。

谢谢

Answer 1

如果有人偶然发现这一点，请尝试在您的 animation-delay 属性中使用负值。

这是链接 https://codepen.io/ikhazen/pen/BXdqrN

&-6 {
  background: #c73e2c;
  animation-delay: -150ms;
  -webkit-animation-delay: -150ms;
}

&-5 {
  background: #ac3c3f;
  animation-delay: -300ms;
  -webkit-animation-delay: -300ms;
}

&-4 {
  background: #903a51;
  animation-delay: -450ms;
  -webkit-animation-delay: -450ms;
}

&-3 {
  background: #733866;
  animation-delay: -600ms;
  -webkit-animation-delay: -600ms;
}

&-2 {
  background: #573678;
  animation-delay: -750ms;
  -webkit-animation-delay: -750ms;
}

&-1 {
  background: #3c348a;
  animation-delay: -900ms;
  -webkit-animation-delay: -900ms;
}