Peristiwa animationiteration

DOM 事件 Peristiwa AnimationEvent

Definisi dan penggunaan

Peristiwa animationiteration terjadi semasa animasi CSS berulang-ulang.

Jika Sifat animation-iteration-count CSSDipasang kepada "1", artinya animasi hanya akan dimainkan sekali, maka peristiwa animationiteration tidak akan terjadi. Animasi perlu dijalankan beberapa kali untuk memicu peristiwa ini.

Untuk pengetahuan lanjut tentang animasi CSS, silakan ikuti Tutorian Animate 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() 方法。

技术细节

冒泡： 支持
可取消： 不支持
事件类型： Peristiwa 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 参考手册：Sifat animation Style

DOM 事件 Peristiwa AnimationEvent