มีการโทรกลับเมื่อเสร็จสิ้นการเคลื่อนไหว CSS3 หรือไม่

มีวิธีใดบ้างในการใช้ฟังก์ชันเรียกกลับในกรณีของภาพเคลื่อนไหว css3 ในกรณีที่อนิเมชั่น Javascript เป็นไปได้ แต่ไม่พบวิธีใด ๆ ใน css3

วิธีหนึ่งที่ฉันเห็นคือเรียกใช้การเรียกกลับหลังจากระยะเวลาของภาพเคลื่อนไหว แต่นั่นไม่ได้ทำให้แน่ใจว่าจะถูกเรียกทันทีหลังจากที่ภาพเคลื่อนไหวจบลง จะขึ้นอยู่กับคิว UI ของเบราว์เซอร์ ฉันต้องการวิธีที่มีประสิทธิภาพมากขึ้น เบาะแสใด ๆ ?

ใช่มี. การโทรกลับเป็นเหตุการณ์ดังนั้นคุณต้องเพิ่มตัวฟังเหตุการณ์เพื่อจับมัน นี่คือตัวอย่างของ jQuery:

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

หรือ js บริสุทธิ์:

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

การสาธิตสด: http://jsfiddle.net/W3y7h/

เป็นวิธีที่ง่ายสำหรับคุณที่จะโทรกลับที่ยังจัดการเปลี่ยน CSS3 / คุณสามารถในการใช้เบราว์เซอร์จะเป็นที่jQuery Plugin ตัวอย่าง:

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

การสาธิต JS Fiddle