CSS3动画是前端页面设计中经常用到的技术，它可以帮助我们创建漂亮的交互效果。在实际开发过程中，有时候需要在CSS3动画完成后执行一些操作，这就需要我们了解如何添加回调函数。
动画完成事件
在CSS3动画中，我们可以使用animation属性来定义一个动画，并通过animationend事件监听动画的结束。animationend事件会在动画播放完毕后触发，从而让我们有机会对动画完成时进行处理。下面是一个示例代码：
<div id="myDiv">Hello World</div>
#myDiv {
animation: myAnim 1s;
}
@keyframes myAnim {
from { opacity: 0; }
to { opacity: 1; }
}const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('animationend', () => {
console.log('Animation completed!');
});在上面的示例中，我们给myDiv元素添加了myAnim动画，并通过JavaScript代码监听了animationend事件。当动画完成后，控制台会输出"Animation completed!"。
处理多个动画
如果一个元素上同时应用了多个动画，那么animationend事件将分别在每个动画完成时触发。为了区分不同的动画，我们可以使用event.animationName属性获取当前触发事件的动画名称。下面是一个示例代码：
<div id="myDiv">Hello World</div>
-- -------------------- ---- ------- ------ - ---------- ------- --- ------- --- - ---------- ------- - ---- - -------- -- - -- - -------- -- - - ---------- ------- - ---- - ---------- --------- - -- - ---------- ----------- - -
const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('animationend', (event) => {
console.log(`Animation ${event.animationName} completed!`);
});在上面的示例中，我们给myDiv元素同时添加了myAnim1和myAnim2两个动画，并通过JavaScript代码监听了animationend事件。当动画完成后，控制台会输出"Animation myAnim1 completed!"和"Animation myAnim2 completed!"。
兼容性问题
不幸的是，animationend事件在某些浏览器中可能无法正常工作。为了解决这个兼容性问题，我们需要使用webkitAnimationEnd事件来代替animationend事件。下面是一个示例代码：
<div id="myDiv">Hello World</div>
#myDiv {
animation: myAnim 1s;
}
@keyframes myAnim {
from { opacity: 0; }
to { opacity: 1; }
}const myDiv = document.querySelector('#myDiv');
myDiv.addEventListener('animationend', handleAnimationEnd);
myDiv.addEventListener('webkitAnimationEnd', handleAnimationEnd);
function handleAnimationEnd() {
console.log('Animation completed!');
}在上面的示例中，我们给myDiv元素添加了myAnim动画，并通过JavaScript代码监听了animationend事件和webkitAnimationEnd事件。当动画完成后，控制台会输出"Animation completed!"。
总结
CSS3动画是前端页面设计中非常重要的技术。了解如何添加回调函数可以帮助我们更好地掌握CSS3动画。需要注意的是，在使用animationend事件时可能会遇到兼容性问题，需要使用webkitAnimationEnd事件来代替。下面是一个完整的示例代码：
<div id="myDiv">Hello World</div>
-- -------------------- ---- ------- ------ - ---------- ------ --- - ---------- ------ - ---- - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------
