animationiteration 事件
实例
当 CSS 动画重复时，对 <div> 元素做一些事情：
var x = document.getElementById("myDIV");
// Chrome、Safari 和 Opera 的代码
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// 标准语法
x.addEventListener("animationiteration", myRepeatFunction);
亲自试一试 »
// 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" 注明了使用前缀的首个版本。
| 事件 | |||||
|---|---|---|---|---|---|
| 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 及更早版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | Yes |
|---|---|
| 是否支持取消: | No |
| 事件类型: | AnimationEvent |
| DOM 版本: | Level 3 Events |
相关页面
CSS 教程: CSS3 Animations
CSS 参考手册: CSS3 animation 属性
CSS 参考手册: CSS3 animation-iteration-count 属性
HTML DOM 参考手册: Style animation 属性
