Javascript CSS3动画完成后是否有回调？

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

---

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

是的，有。回调是一个事件，因此必须添加事件侦听器才能捕获它。这是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);

现场演示：

---

一种简单的回调方法，可以处理CSS3转换/浏览器兼容性。例如：

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

---

对于IE10，它是“MSAnimationEnd”（请参阅）它是

transitionend

，而不是

animationend

@MichaelJones不，这是用于css3过渡。问题是关于动画的。@MartinWittemannIE10最终版现在使用

animationend

@Husky该代码在Chrome和FF 14中确实有效，请参阅更新的fiddle Duplicate，它有一个更完整的解决方案如果您想执行简单的CSS操作，可能会重复，例如，在转换后隐藏元素，可能您不需要回调，你可以用动画的关键帧来解决你的问题。它与jQuery animate共享API规范，但仍然利用CSS动画的硬件渲染平滑度，这是一个额外的好处。我们刚刚用这个替代了jqueryanimate。