Safari 中的 CSS 动画延迟错误

Question

我最近在 Safari 中遇到了一些关于 CSS 动画的奇怪行为，并且在操作 DOM 时无法更新元素位置。我拍了一些 GIF 来说明这一点：

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

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

这对我来说似乎是回流/重绘问题。我还注意到，当您将鼠标悬停在 Safari 浏览器中的动画元素上时，蓝色叠加层也跟不上动画。

这是代码：http : //codepen.io/jabes/pen/pNgRrg

Answer 1

我最近偶然发现了一个关于 safari 和 css3 动画的类似问题，似乎 safari 在使用速记模式定义动画时存在覆盖单个动画属性的问题。就我而言，它是动画播放状态，对于 Safari 来说无法更改，因此我必须立即应用整个动画字符串，而不是简单地设置动画播放状态：运行。

尝试：

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

延迟发生在计时功能之后。