Safari中的CSS动画延迟错误 [英] CSS Animation Delay Bug In Safari

问题描述

最近，我发现Safari在CSS动画方面有些奇怪的行为，并且在操作DOM时无法更新元素位置。我采用了一些GIF来说明这一点：

I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:

在Chrome中（ http ：//recordit.co/cCim1IwyMc ），当在DOM中更新 animation-delay 时，浏览器将按您期望的那样更新元素的动画位置。

In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.

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

In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.

对我来说，这似乎是重排/重涂问题。我还注意到，当您将鼠标悬停在Safari检查器中的动画元素上时，蓝色叠加层也无法跟上动画的进度。

This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.

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

推荐答案

我最近偶然发现了关于safari和css3动画的类似问题，当使用速记模式定义动画时，safari似乎有覆盖单个动画属性的问题。在我的情况下，这是动画播放状态，无法针对野生动物园进行更改，因此我不得不立即应用整个动画字符串，而不是简单地设置动画播放状态：运行。

I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.

尝试：

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

延迟时间在计时功能之后

The delay goes right after the timing function.

这篇关于Safari中的CSS动画延迟错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！