animationiteration 事件
實例
在 CSS 動畫重新播放時為 <div> 元素添加監(jiān)聽事件:
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 動畫重新播放時觸發(fā)。
如果 CSS animation-iteration-count 屬性設(shè)置為"1", 動畫將只播放一次, animationiteration 事件不再觸發(fā)。
更多關(guān)于 CSS 動畫的內(nèi)容,請查看我們的CSS3 動畫 章節(jié)。
CSS 動畫播放時,會發(fā)生以下三個事件:
- animationstart - CSS 動畫開始后觸發(fā)
- animationiteration - CSS 動畫重復(fù)播放時觸發(fā)
- animationend - CSS 動畫完成后觸發(fā)
瀏覽器支持
表格中的數(shù)字表示支持該事件的第一個瀏覽器的版本號。
"webkit" 或 "moz" 后面指定的數(shù)字為支持該事件的第一個版本號前綴。
事件 | |||||
---|---|---|---|---|---|
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() 方法。
技術(shù)細節(jié)
是否支持冒泡: | Yes |
---|---|
是否可以取消: | No |
事件類型: | AnimationEvent |
相關(guān)頁面
CSS 教程: CSS3 動畫
CSS 參考手冊: CSS3 動畫屬性
CSS 參考手冊: CSS3 animation-iteration-count 屬性
HTML DOM 參考手冊: Style 動畫屬性
事件對象
更多建議: