如何用CSS3動畫觸發回調函數？

為 CSS3 動畫使用回呼

在 Web 開發領域，出現了這樣的疑問：CSS3 動畫可以觸發回調函數嗎？雖然 JavaScript 動畫提供了此功能，但 CSS3 動畫缺乏這種固有的支援。

為了規避此限制，CSS3 動畫可以與事件偵聽器結合使用，利用動畫本質上是事件本身的事實。透過使用jQuery 或純JavaScript，開發人員可以訂閱這些事件並在完成後呼叫指定的回調：

jQuery:

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

純JavaScript ：

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

這些事件偵聽器可以附加到任何動畫HTML元素。當動畫到達終點時，將執行指定的回呼函數：

注意：不同的瀏覽器可能會顯示不同的事件監聽器名稱前綴。提供的範例涵蓋了流行的前綴，確保了主要瀏覽器的兼容性。

有關現場演示，請訪問：

http://jsfiddle.net/W3y7h/

以上是如何用CSS3動畫觸發回調函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！