animationiteration 事件

DOM 事件 AnimationEvent

定義和用法

animationiteration 事件在重復 CSS 動畫時發生。

如果 CSS animation-iteration-count 屬性設置為 "1"，表示動畫只會播放一次，則不會發生 animationiteration 事件。動畫需要多次運行才能觸發該事件。

如需有關 CSS 動畫的更多知識，請學習我們的 CSS3 動畫教程。

當 CSS 動畫播放時，可能會發生三個事件：

實例

當 CSS 動畫重復時，對 <div> 元素做一些事情：

var x = document.getElementById("myDIV");
// 針對 Chrome、Safari 以及 Opera 的代碼
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// 標準語法
x.addEventListener("animationiteration", myRepeatFunction);

親自試一試

語法

object.addEventListener("webkitAnimationIteration", myScript);  // 針對 Chrome、Safari 以及 Opera 的代碼
object.addEventListener("animationiteration", myScript);        // 標準語法

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 支持
可取消： 不支持
事件類型： AnimationEvent
DOM 版本： Level 3 Events

瀏覽器支持

表中的數字注明了完全支持該事件的首個瀏覽器版本。

數字后面的 "webkit" 或 "moz" 注明了使用前綴的首個版本。

事件 Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

注釋：對于 Chrome、Safari 以及 Opera，請使用 webkitAnimationEnd。

相關頁面

CSS 教程：CSS3 動畫

CSS 參考手冊：CSS3 animation 屬性

CSS 參考手冊：CSS3 animation-iteration-count 屬性

HTML DOM 參考手冊：Style animation 屬性

DOM 事件 AnimationEvent