CSS动画事件
CSS 动画播放时，会发生以下三个事件：
animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发注意标准语法都是小写，兼容大小写驼峰写法
webkitAnimationStart
webkitAnimationIteration
webkitAnimationEnd
语法
object.addEventListener("webkitAnimationEnd", myScript); // Chrome, Safari 和 Opera
object.addEventListener("animationend", myScript); // 标准语法 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#box{
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
-webkit-animation: move 2s 2 ease;
}
@-webkit-keyframes move {
0%{left: 0;}
50%{left: 200px;}
100%{left: 0;}
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById("box");
oBox.addEventListener("animationstart", start); // 动画开始时事件
oBox.addEventListener("animationiteration", run); // 动画重复运动时事件
oBox.addEventListener("animationend", end); // 动画结束时事件
function start() { console.log("动画开始"); }
function run() { console.log("动画重复运动"); }
function end() { console.log("动画结束"); }
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。