Czy istnieje wywołanie zwrotne po zakończeniu animacji CSS3?

Czy istnieje sposób na zaimplementowanie funkcji zwrotnej w przypadku animacji css3? W przypadku animacji Javascript jest to możliwe, ale nie można tego zrobić w css3.

Jednym ze sposobów, które mogłem zobaczyć, jest wykonanie wywołania zwrotnego po czasie trwania animacji, ale to nie gwarantuje, że zawsze będzie wywoływane zaraz po zakończeniu animacji. Będzie to zależeć od kolejki interfejsu przeglądarki. Chcę solidniejszej metody. Jakaś wskazówka?

Tak jest. Wywołanie zwrotne jest zdarzeniem, więc aby je złapać, musisz dodać detektor zdarzenia. Oto przykład z jQuery:

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

Lub czysty js:

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

Demo na żywo: http://jsfiddle.net/W3y7h/

Łatwym sposobem na wywołanie zwrotne, które obsługuje również przejścia CSS3 / zgodność z przeglądarkami, byłaby wtyczka jQuery Transit . Przykład:

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

JS Fiddle Demo