animationstart 事件
實例
在CSS 動畫開始播放時為<div> 元素添加監聽事件:
var x = document.getElementById("myDIV");
// Chrome, Safari 和Opera 代碼
x.addEventListener("webkitAnimationStart", myStartFunction);
// 標準語法
x.addEventListener("animationstart", myStartFunction);
// Chrome, Safari 和Opera 代碼
x.addEventListener("webkitAnimationStart", myStartFunction);
// 標準語法
x.addEventListener("animationstart", myStartFunction);
嘗試一下»
定義和用法
animationstart 事件在CSS 動畫開始播放時觸發。
更多關於CSS動畫的內容，請查看我們的CSS3動畫章節。
CSS 動畫播放時，會發生以下三個事件：
- animationstart - CSS 動畫開始後觸發
- animationiteration - CSS動畫重複播放時觸發
- animationend - CSS動畫完成後觸發
瀏覽器支持
表格中的數字表示支持該事件的第一個瀏覽器的版本號。
"webkit" 或"moz" 後面指定的數字為支持該事件的第一個版本號前綴。
| 事件 | |||||
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
注意： Chrome, Safari和Opera瀏覽器使用webkitAnimationEnd前綴。
語法
object.addEventListener("webkitAnimationStart", myScript ); // Code for Chrome, Safari and Opera
object .addEventListener("animationstart", myScript ); // Standard syntax
object .addEventListener("animationstart", myScript ); // Standard syntax
注意： Internet Explorer 8及更早IE版本不支持addEventListener()方法。
技術細節
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件類型: | AnimationEvent |
相關頁面
CSS教程: CSS3動畫
CSS參考手冊: CSS3動畫屬性
HTML DOM參考手冊: Style動畫屬性
事件對象