javascript - CSS3 动画完成时是否有回调？

Question

有没有办法实现css3动画的回调函数？在 Javascript 动画的情况下，它是可能的，但在 css3 中找不到任何方法。

我能看到的一种方法是在动画持续时间后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更强大的方法。有什么线索吗？

Answer 1

是的，有。回调是一个事件，所以你必须添加一个事件监听器来捕捉它。这是一个 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/