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触发的，以避免加载时间不一致。

NB ：这是一个理论问题，上面的代码是一个例子，您不能在家中使用它，因为有更多适当的方法可以这样做。

Answer 1

据我所知，无法保证。但是，有些事情你可以听;

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

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

另外，正如我的原始答案（错误地）建议的那样，如果您想使用CSS过渡而不是动画，则会有transitionend（具有相似的前缀）。

Answer 2

这是错误的方法。没有任何保证它们会同步，尽管它们可能会很接近。

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

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

使用以下代码：

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

绑定到它。

javascript和css时序是否同步？

2 个答案: