如何在CSS3動畫完成時觸發回調？

CSS3 動畫的回呼

CSS3 動畫提供了令人印象深刻的動畫效果，但缺乏完成時實現回調的靈活性。本文探討了利用事件監聽器來解決這個問題。

問題：

當 CSS3 動畫完成時，我們如何觸發回調函數？雖然 JavaScript 動畫支援回調，但 CSS3 動畫似乎缺乏類似的功能。

解決方案：

雖然 CSS3 動畫不直接提供回調機制，但它們發出的事件可以使用事件偵聽器捕獲。這允許我們在這些事件發生時執行回調。這裡有兩種方法：

1.使用jQuery：

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

2.使用純JavaScript：

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

這些事件偵聽器會偵測動畫的完成並觸發指定的回呼函數。這確保了回調在動畫完成時可靠地執行。

現場演示：

有關實際演示，請參閱http://jsfiddle 上的現場小提琴。 net/W3y7h/ 來見證回呼功能的運作。

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