如何用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中文网其他相关文章！