Are javascript and css timing synchronized?

Question

Are javascript (timeout, interval) and css (animations, delay) timing synchronized ?

For instance :

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

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

Will anim2 be precisely triggered at the end of anim1 ? Is it different depending on the browser ? In this case I'm more interested in a webkit focus.

Note that anim1 is triggered via javascript to avoid loading time inconsistencies.

NB : This is a theoretical question, the above code is an illustration and you must not use it at home as there are way more proper means to do so.

Answer 1

As far as I know, there is no guarantee. However, there are events which you can listen for;

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

Note that because these are new, there are still vendor prefixes you need to account for; webkitAnimationEnd and oanimationend for Webkit and Opera.

Also as my original answer (wrongly) suggested, there is transitionend (with similar prefixes) if you want to use CSS transitions instead of animations.

Answer 2

This is the wrong way to do this. There isn't any guarantee that they will be in sync, though it's likely they'll be close.

Events are provided for the start, end an repeat of an animation.

https://developer.apple.com/documentation/webkitjs/webkitanimationevent details these.

Use code like:

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

to bind to it.