Apakah ada panggilan balik saat menyelesaikan animasi CSS3?

Apakah ada cara untuk mengimplementasikan fungsi callback dalam kasus animasi css3? Dalam kasus animasi Javascript itu mungkin tetapi tidak menemukan cara untuk melakukannya di css3.

Salah satu cara yang bisa saya lihat adalah mengeksekusi callback setelah durasi animasi tetapi itu tidak memastikan bahwa itu akan selalu dipanggil tepat setelah animasi berakhir. Ini akan tergantung pada antrian UI browser. Saya ingin metode yang lebih kuat. Ada petunjuk?

Ya ada. Callback adalah sebuah event, jadi Anda harus menambahkan event listener untuk menangkapnya. Ini adalah contoh dengan jQuery:

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

Atau js murni:

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

Demo langsung: http://jsfiddle.net/W3y7h/

Cara mudah bagi Anda untuk melakukan panggilan balik yang juga menangani transisi CSS3 / kompatibilitas browser adalah dengan jQuery Transit Plugin . Contoh:

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

Demo JS Fiddle