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';
}

請注意，由於這些是新的，因此您仍需要考慮供應商前綴; Webkit和Opera的webkitAnimationEnd和oanimationend 。

另外，正如我的原始答案（錯誤地）所暗示的那樣，如果您想使用CSS過渡而不是動畫，則會有transitionend （具有相似的前綴）。

Answer 2

這是錯誤的方法。 沒有任何保證它們會同步，盡管它們可能會很接近。

為開始提供事件，結束動畫的重復。

https://developer.apple.com/documentation/webkitjs/webkitanimationevent詳細介紹了這些內容。

使用如下代碼：

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

綁定它。