javascript - javascript和CSS计时是否同步？

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

注意::这是一个理论性的问题，上面的代码是一个说明，您不能在家中使用它，因为有更多合适的方法可以使用它。

最佳答案

据我所知，并不能保证。但是，您可以听一些事件。

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

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

另外，正如我最初的答案(错误)所建议的，如果您想使用CSS过渡而不是动画，则可以使用transitionend(具有类似的前缀)。