Are javascript and css synchronized?

Question

Are javascript (timeout, interval) and css (animation, delay) 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 exactly run at the end of anim1? Does it depend on the browser? In this case, I'm more interested in the focus of webkit.

Note that anim1 runs through javascript to avoid loading time inconsistencies.

NB . This is a theoretical question, the code above is an illustration, and you should not use it at home, as there are more suitable means for this.

Answer 1

As far as I know, there is no guarantee. However, there are events that you can listen to,

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

Note that since they are new, there are still vendor prefixes that you need to consider; webkitAnimationEnd and oanimationend for Webkit and Opera.

Just like my original answer (erroneously), there is a 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 is no guarantee that they will be synchronized, although they are likely to be close.

Events are provided to begin, complete the repetition of the animation.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html details them.

Use code:

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

to bind to it.