Are javascript and css timing synchronized?

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.


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.