在做前端页面时，如果一个页面有多套动画特效依次播放。我们一般才用动画延时播放，延时时间为前面所有动画播放的总和。不过这样做的话有一些弊端：
1、如果动画很多的话会让人感觉很累，因为每个动画动摇计算前方动画所运行的时间。
2、如果中间某个动画的运行时间进行修改的话，后面所有的动画都需要修改。
所以，如果能监听动画结束事件，就可以完美解决。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>CSS3 动画事件</title>
<style type="text/css">
h1 {
animation-duration: 3s;
animation-name: slidein;
/*如果加入了循环，则结束事件永远不会触发*/
/*animation-iteration-count: infinite;
animation-direction: alternate; */
}
@keyframes slidein {
from {
margin-left: 100%;
width: 100%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
</head>
<body>
<h1 id="ani">Test CSS3 SlideIn</h1>
<script>
ani.addEventListener('animationstart', function() {
console.log('animate start')
}, false);
ani.addEventListener('animationend', function() {
console.log('animate end')
}, false);
</script>
</body>
</html>