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 */
}

延时在计时功能之后。