Question

我在Safari上有一个CSS动画错误，该错误导致我创建的wave动画无法正常工作。

下面是我的动画关键帧：

@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

在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

此部分：

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

-webkit-animation-delay丢失：150ms；

工作代码：

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

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

Answer 3

如果有人偶然发现此问题，请尝试在您的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;
}

Safari上的CSS动画错误

3 个答案: