javascript - javascript和css时间是否同步？

Question

javascript（超时、间隔）和 css（动画、延迟）时间是否同步？

例如 ：

#anim1 {
animation: anim1 10s linear;
display: none;
}

anim1.style.display = "block" ;
setTimeout(function() {
 anim2.style.webkitAnimation= 'anim2 10s linear';
}, 10000);

anim2 会在 anim1 结束时被精确触发吗？是否因浏览器而异？在这种情况下，我对 webkit 焦点更感兴趣。

请注意，anim1 是通过 javascript 触发的，以避免加载时间不一致。

注意：这是一个理论问题，上面的代码是一个说明，你不能在家里使用它，因为有更合适的方法可以这样做。

Answer 1

据我所知，没有任何保证。但是，您可以收听一些事件；

anim1.addEventListener('animationend',function(){
    anim2.style.webkitAnimation= 'anim2 10s linear';
}

请注意，由于这些是新的，因此您仍然需要考虑供应商前缀；webkitAnimationEnd对于 Webkit和oanimationendOpera。

同样，正如我最初的回答（错误地）建议的那样，transitionend如果您想使用 CSS 过渡而不是动画，则存在（具有类似前缀）。

Answer 2

这是错误的做法。不能保证它们会同步，尽管它们很可能会很接近。

为动画的开始、结束重复提供事件。

https://developer.apple.com/documentation/webkitjs/webkitanimationevent详细介绍了这些。

使用如下代码：

element.addEventListener("webkitAnimationEnd", callfunction,false);

绑定到它。