Manual Rujukan JavaScript
/ animationiteration 事件
animationiteration 事件
animationiteration 事件
實例
<!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 事件觸發(fā) - 動畫已經開始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件觸發(fā) - 動畫重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件觸發(fā) - 動畫已經完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
定義和用法
animationiteration 事件在 CSS 動畫重新播放時觸發(fā)。
如果 CSS animation-iteration-count 屬性設置為 "1", 動畫將只播放一次， animationiteration 事件不再觸發(fā)。
更多關于 CSS 動畫的內容，請查看我們的CSS3 動畫 章節(jié)。
CSS 動畫播放時，會發(fā)生以下三個事件：
- animationstart - CSS 動畫開始后觸發(fā)
- animationiteration - CSS 動畫重復播放時觸發(fā)
- animationend - CSS 動畫完成后觸發(fā)
瀏覽器支持
表格中的數(shù)字表示支持該事件的第一個瀏覽器的版本號。
"webkit" 或 "moz" 后面指定的數(shù)字為支持該事件的第一個版本號前綴。
| 事件 | |||||
|---|---|---|---|---|---|
| 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 及更早 IE 版本不支持 addEventListener() 方法。
技術細節(jié)
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件類型: | AnimationEvent |
相關頁面
CSS 教程: CSS3 動畫
CSS 參考手冊: CSS3 動畫屬性
CSS 參考手冊: CSS3 animation-iteration-count 屬性
HTML DOM 參考手冊: Style 動畫屬性