animationiteration incident
animationiteration Event
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
// Chrome, Safari 和 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>Run Instance»
Click "Run instance" button to view the online instance
Definition and usage
The animationiteration event is triggered when the CSS animation is replayed.
If the CSS animation-iteration-count property is set to "1", the animation will only play once and the animationiteration event will no longer be triggered.
For more information about CSS animation, check out our CSS3 Animation chapter.
When a CSS animation plays, the following three events will occur:
- animationstart - Triggered after the CSS animation starts
- animationiteration - Triggered when the CSS animation is played repeatedly
- animationend - Triggered after CSS animation is completed
Browser support
The number in the table indicates the version number of the first browser that supports the event.
The number specified after "webkit" or "moz" is the first version number prefix that supports this event.
| event | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
Note: Chrome, Safari and Opera browsing device use webkitAnimationEnd prefix.
grammar
object.addEventListener("animationiteration", myScript); // Standard syntax
#Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.
Technical details
| Whether bubbling is supported: | Yes |
|---|---|
| Can be canceled: | No |
| Event type: | AnimationEvent |
##Related pages CSS Tutorial: CSS3 AnimationCSS Reference Manual: CSS3 Animation PropertiesCSS Reference Manual: CSS3 animation-iteration-count PropertyHTML DOM Reference Manual: Style animation properties
