animationstart 事件
定義和用法
當 CSS 動畫開始播放時，animationstart 事件發生。
如需有關 CSS 動畫的更多知識，請學習我們的 CSS3 動畫教程。
當 CSS 動畫播放時，可能會發生三個事件：
- animationstart - 當 CSS 動畫開始時發生
- animationiteration - 當 CSS 動畫重復時發生
- animationend - 當 CSS 動畫完成時發生
實例
當 CSS 動畫開始時，對 <div> 元素做一些事情：
var x = document.getElementById("myDIV");
// 針對 Chrome、Safari 以及 Opera 的代碼
x.addEventListener("webkitAnimationStart", myStartFunction);
// 標準語法
x.addEventListener("animationstart", myStartFunction);
語法
object.addEventListener("webkitAnimationStart", myScript); // 針對 Chrome、Safari 以及 Opera 的代碼
object.addEventListener("animationstart", myScript); // 標準語法
注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技術細節
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件類型： | AnimationEvent |
| DOM 版本： | Level 3 Events |
瀏覽器支持
表中的數字注明了完全支持該事件的首個瀏覽器版本。
數字后面的 "webkit" 或 "moz" 注明了使用前綴的首個版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
注釋：對于 Chrome、Safari 以及 Opera，請使用 webkitAnimationEnd。
