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以及oanimationendWebkit 和 Opera。

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