Existe-t-il un rappel à la fin d'une animation CSS3?

Question

Est-il possible d'implémenter une fonction de rappel en cas d'animation CSS3? En cas d’animation Javascript, il est possible, mais ne trouve aucun moyen de le faire en css3.

Une façon de voir est d’exécuter un rappel après la durée de l’animation mais cela ne garantit pas qu’il sera toujours appelé juste après la fin de l’animation. Cela dépendra de la file d'attente de l'interface utilisateur du navigateur. Je veux une méthode plus robuste. Un indice?

Answer 1

Oui il y a. Le rappel est un événement, vous devez donc ajouter un écouteur d'événement pour le détecter. Voici un exemple avec jQuery:

 $("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});
 

Ou pur js:

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

Démo en direct: http://jsfiddle.net/W3y7h/

Answer 2

Un moyen facile pour vous de faire un rappel qui gère également vos compatibilités de transitions / navigateurs CSS3 serait le plugin jQuery Transit . Exemple:

 //Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});
 

JS Fiddle Demo