Safari 上的 CSS 动画错误

Hitori 发表于 Dev

人取

我在 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 属性不能很好地工作。有时，我注意到所有的点都会同时动画。这很奇怪。

谢谢

人取

如果有人偶然发现这一点，请尝试在您的动画延迟属性中使用负值。

这是链接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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。