CSS3 animasyonunun tamamlanmasıyla ilgili bir geri arama var mı?

Css3 animasyonu durumunda bir geri arama işlevi uygulamanın herhangi bir yolu var mı? Javascript animasyonu olması durumunda mümkündür ancak css3'te yapmanın bir yolunu bulamamaktadır.

Görebildiğim bir yol, animasyon süresinden sonra geri aramayı yürütmek, ancak bu her zaman animasyon bittikten hemen sonra çağrılacağından emin olmuyor. Tarayıcının kullanıcı arayüzü sırasına bağlı olacaktır. Daha sağlam bir yöntem istiyorum. Bir ipucu?

Evet var. Geri arama bir olaydır, bu nedenle onu yakalamak için bir olay dinleyicisi eklemeniz gerekir. Bu jQuery ile bir örnektir:

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

Veya saf js:

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

Canlı demo: http://jsfiddle.net/W3y7h/

CSS3 geçişlerinizi / tarayıcı uyumluluklarınızı da yöneten bir geri arama yapmanın kolay bir yolu jQuery Transit Eklentisi olacaktır . Misal:

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

JS Fiddle Demosu