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 个点。似乎动画延迟属性不是很好。 有时，我注意到所有的点都会同时产生动画。这很奇怪。

谢谢

Answer 1

我可以在 Mac OS 上的 Safari 上看到类似的问题，除了第一个点是独立的，其余的都是一起的。我创建了一支工作笔here。

问题在于您的笔中的以下 css

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

更改它以使百分比按顺序修复它：

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

如果我正确地解释了specification，当它说

为了确定关键帧的集合，选择器中的所有值都按时间升序排序

那么这似乎是 Safari 中的一个错误，因为您指定关键帧的顺序无关紧要。

Answer 2

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

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

Answer 3

这部分：

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

缺少-webkit-animation-delay: 150ms;

工作代码：

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

建议：使用 css autoprefixer 来避免此类错误。