animationiteration 事件

实例

当 CSS 动画重复时，对 <div> 元素做一些事情：

var x = document.getElementById("myDIV");

// 针对 Chrome、Safari 以及 Opera 的代码
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// 标准语法
x.addEventListener("animationiteration", myRepeatFunction);

亲自试一试

定义和用法

animationiteration 事件在重复 CSS 动画时发生。

如果 CSS animation-iteration-count 属性设置为 "1"，表示动画只会播放一次，则不会发生 animationiteration 事件。动画需要多次运行才能触发该事件。

如需有关 CSS 动画的更多知识，请学习我们的 CSS3 动画教程。

当 CSS 动画播放时，可能会发生三个事件：

• animationstart - 当 CSS 动画开始时发生
• animationiteration - 当 CSS 动画重复时发生
• animationend - 当 CSS 动画完成时发生

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

数字后面的 "webkit" 或 "moz" 注明了使用前缀的首个版本。

注释：对于 Chrome、Safari 以及 Opera，请使用 webkitAnimationEnd。

语法

object.addEventListener("webkitAnimationIteration", myScript);  // 针对 Chrome、Safari 以及 Opera 的代码
object.addEventListener("animationiteration", myScript);        // 标准语法

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

技术细节

相关页面

CSS 教程：CSS3 动画

CSS 参考手册：CSS3 animation 属性

CSS 参考手册：CSS3 animation-iteration-count 属性

HTML DOM 参考手册：Style animation 属性