transitionEnd事件
CSS的过渡效果（transition）结束后，触发transitionEnd事件。例如：
el.addEventListener('transitionend', onTransitionEnd, false);
function onTransitionEnd() {
console.log('Transition end');
}
transitionEnd的事件对象具有以下属性。
- propertyName：发生transition效果的CSS属性名。
- elapsedTime：transition效果持续的秒数，不含transition-delay的时间。
- pseudoElement：如果transition效果发生在伪元素，会返回该伪元素的名称，以“::”开头。如果不发生在伪元素上，则返回一个空字符串。
实际使用transitionend事件时，可能需要添加浏览器前缀。
el.addEventListener('webkitTransitionEnd', function () {
el.style.transition = 'none';
});
animationstart、animationend、animationiteration事件
CSS动画有以下三个事件。
- animationstart事件：动画开始时触发。
- animationend事件：动画结束时触发。
- animationiteration事件：开始新一轮动画循环时触发。如果animation-iteration-count属性等于1，该事件不触发，即只播放一轮的CSS动画，不会触发animationiteration事件。
【示例】这三个事件的事件对象，都有animationName属性（返回产生过渡效果的CSS属性名）和elapsedTime属性（动画已经运行的秒数）。对于animationstart事件，elapsedTime属性等于0，除非animation-delay属性等于负值。
var el = document.getElementById("animation");
el.addEventListener("animationstart", listener, false);
el.addEventListener("animationend", listener, false);
el.addEventListener("animationiteration", listener, false);
function listener(e) {
var li = document.createElement("li");
switch(e.type) {
case "animationstart":
li.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
li.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
li.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(li);
}
上面代码的运行结果是下面的样子。
Started: elapsed time is 0 New loop started at time 3.01200008392334 New loop started at time 6.00600004196167 Ended: elapsed time is 9.234000205993652
animation-play-state属性可以控制动画的状态（暂停/播放），该属性需要加上浏览器前缀。
element.style.webkitAnimationPlayState = "paused"; element.style.webkitAnimationPlayState = "running";