I tempi di javascript e css sono sincronizzati?

Question

I tempi javascript (timeout, intervallo) e css (animazioni, ritardo) sono sincronizzati?

Per esempio:

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

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

Sarà anim2 essere proprio attivato alla fine del anim1? È diverso a seconda del browser? In questo caso sono più interessato a un focus sul webkit.

Si noti che anim1 viene attivato tramite javascript per evitare il caricamento di incoerenze temporali.

NB: Questa è una questione teorica, il codice di cui sopra è un'illustrazione e non dovete usarlo a casa in quanto vi sono mezzi modo più corretto di fare così.

Answer 1

Per quanto ne so, non vi è alcuna garanzia. Tuttavia, ci sono eventi che puoi ascoltare;

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

noti che perché questi sono nuovi, ci sono ancora i vendor prefix è necessario per tenere conto di; webkitAnimationEnd e oanimationend per Webkit e Opera.

Anche se la mia risposta originale (erroneamente suggerita), è transitionend (con prefissi simili) se si desidera utilizzare le transizioni CSS anziché le animazioni.

Answer 2

Questo è il modo sbagliato per farlo. Non c'è alcuna garanzia che saranno sincronizzati, anche se è probabile che saranno vicini.

Gli eventi sono forniti per l'inizio, termina una ripetizione di un'animazione.

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

utilizzare il codice:

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

di legarsi ad esso.