chaînage des transitions css3

Question

Quelle est la meilleure méthode pour enchaîner les transitions css3 - c'est-à-dire déplacer un élément après l'autre. Le moyen brut serait d'utiliser simplement setTimeout(), une meilleure façon d'écouter l'événement de fin de transition? D'autres idées?

Merci.

Answer 1

Définissez un délai sur la deuxième transition correspondant à la longueur de la première. http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

ou utiliser des images clés: https://stackoverflow.com/a/7294539/1431252

Answer 2

Jquery Transit est une bibliothèque vraiment cool pour cela. Il anime en utilisant CSS, et vous donne des rappels quand il se termine, de sorte que vous pouvez les enchaîner comme ceci:

$('.box'). 
transition({ x: '-40px' }, 250). 
transition({ x: '0px' }, 250). 
transition({ y: '-40px' }, 250). 
transition({ y: '0px' }, 250);