webkit-animation動畫有三個事件：
- 開始事件: webkitAnimationStart
- 結束事件: webkitAnimationEnd
- 重復運動事件: webkitAnimationIteration
css3的過渡屬性transition，在動畫結束時，也存在結束的事件：webkitTransitionEnd
注意：transition 僅有這一個事件
var o = document.getElementById("div1");
// 動畫開始時事件
o.addEventListener("webkitAnimationStart", function() {
console.log("動畫開始");
})
// 動畫重復運動時事件
o.addEventListener("webkitAnimationIteration", function() {
console.log("動畫重復運動");
})
// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
console.log("動畫結束");
})
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>webkitAnimationEnd</title>
<style type="text/css">
#div1{
margin: 200px auto 0;
width: 200px;
height: 200px;
color: #fff;
background-color: #000;
-webkit-animation: transform 3s 2 ease;
}
@-webkit-keyframes transform {
0%{
-webkit-transform: scale(1) rotate(50deg);
}
30%{
-webkit-transform: scale(2) rotate(100deg);
}
6%{
-webkit-transform: scale(0.5) rotate(-100deg);
}
100%{
-webkit-transform: scale(1) rotate(0);
}
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var o = document.getElementById("div1");
// 動畫開始時事件
o.addEventListener("webkitAnimationStart", function() {
alert("動畫開始");
})
// 動畫重復運動時事件
o.addEventListener("webkitAnimationIteration", function() {
alert("動畫重復運動");
})
// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
this.className = "";
alert("動畫結束");
})
</script>
</body>
</html>