监听css3的animation动画和transition事件

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("动画结束");
})

代码实例：