動畫迭代事件


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 事件触发 - 动画已经开始";
    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>

##執行實例»點擊"執行實例" 按鈕查看線上實例


#定義和用法

animationiteration 事件在CSS 動畫重新播放時觸發。

如果 CSS animation-iteration-count 屬性設定為 "1", 動畫將只播放一次， animationiteration 事件不再觸發。

更多關於 CSS 動畫的內容，請查看我們的CSS3 動畫 章節。

CSS 動畫播放時，會發生以下三個事件：

    animationstart - CSS 動畫開始後觸發
  • animationiteration - CSS 動畫重複播放時觸發
  • animationend - CSS 動畫完成後觸發
瀏覽器支援

表格中的數字表示支援該事件的第一個瀏覽器的版本號。

"webkit" 或 "moz" 後面指定的數字為支援該事件的第一個版本號前綴。

事件#16.012.1





animationiteration4.0 webkit10.0 
#5.0 moz4.0 webkit
##15.0 webkit

注意：

 Chrome, Safari 和Opera 瀏覽器使用 webkitAnimationEnd 前綴。

文法
object.addEventListener("webkitAnimationIteration", myScript);  // Chrome, Safari 與 Opera程式碼
object.addEventListener("animationiteration", myScript
);        // 標準語法

注意：

Internet Explorer 8 及更早 IE 版本不支援 addEventListener() 方法。
技術細節是否支援冒泡:Yes是否可以取消:No事件類型:AnimationEvent

相關頁面

CSS 教學： CSS3 動畫

CSS 參考手冊: CSS3 動畫屬性

CSS 參考手冊: CSS3 animation-iteration-count 屬性

HTML DOM 參考手冊: Style 動畫屬性
####