Safari 中 CSS 动画延迟 Bug

Question

5

最近我在使用Safari浏览器的时候，发现了一些关于CSS动画的奇怪行为，当DOM被操作时，元素的位置无法更新。我已经创建了一些GIF来说明这个问题：

在Chrome中(http://recordit.co/cCim1IwyMc)，当DOM中的animation-delay被更新时，浏览器会像您预期的那样更新元素的动画位置。

在Safari中(http://recordit.co/3DRmEdo0FC)，当DOM中的animation-delay被更新时，浏览器无法更新元素的动画位置。

对我来说，这似乎是一个回流/重绘问题。我还注意到，在Safari的检查器中悬停在动画元素上时，蓝色叠加层也无法跟随动画更新。

- Justin Bull

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Philipp Wrann · Accepted Answer

我最近遇到了一个与Safari和CSS3动画相关的类似问题，似乎Safari在使用缩写模式定义动画时存在覆盖单个动画属性的问题。在我的情况下，无法更改Safari的动画播放状态，因此我不得不一次性应用整个动画字符串，而不能简单地设置animation-play-state：running。

请尝试：

.animator {
  width: calc(100% - 100px);
  animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}

延迟时间紧随时间函数之后。