例
做一些與<div>元素時重複一個CSS動畫:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
//
Standard syntax
x.addEventListener("animationiteration",
myRepeatFunction);
試一試» 定義和用法
當重複CSS動畫時發生animationiteration事件。
如果CSS animationiteration數屬性設置為"1"這意味著動畫將只在一個時間出場,不會發生animationiteration事件。 動畫需要運行一次以上此事件激發。
有關CSS動畫的更多信息,請參閱我們的教程CSS3動畫 。
當CSS動畫播放,有可能會發生三個事件:
- animationstart -當CSS動畫已經開始出現
- animationiteration - 當重複CSS動畫時
- animationend -當CSS動畫完成時
瀏覽器支持
在表中的數字規定,完全支持該事件的第一個瀏覽器版本。
數字其次是"webkit"或"moz"指定的前綴工作的第一個版本。
事件 | |||||
---|---|---|---|---|---|
animationiteration | 4.0的WebKit | 10.0 | 16.0 5.0萬盎司 | 4.0的WebKit | 15.0的WebKit 12.1 |
注意:使用Chrome,Safari和Opera,使用webkitAnimationIteration前綴。
句法
object.addEventListener("webkitAnimationIteration", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationiteration", myScript );
// Standard syntax
注意: addEventListener()在Internet Explorer 8和更早版本不支持的方法。
技術細節
泡沫: | 是 |
---|---|
取消: | 沒有 |
事件類型: | AnimationEvent |
DOM版本: | 3級事件 |
相關頁面
CSS教程: CSS3動畫
CSS參考: CSS3 animation Property
CSS參考: CSS3 animation-iteration-count Property
HTML DOM參考: Style animation Property
<事件對象