完成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/