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