animationstart 事件


animationstart 事件

實例

#
<!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>

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


#定義和用法

animationstart 事件在CSS 動畫開始播放時觸發。

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

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

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

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

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

事件animationstart4.0 webkit10.0 5.0 moz4.0 webkit






#16.0		##15.0 webkit
12.1

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

文法

object.addEventListener("webkitAnimationStart", myScript);  // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript);        // Standard syntax

注意： Internet Explorer 8 及更早 IE 版本不支援 addEventListener() 方法。

技術細節
是否支援冒泡:Yes
是否可以取消:No
事件類型:AnimationEvent

相關頁面

CSS 教學: CSS3 動畫

CSS 參考手冊: CSS3 動畫屬性

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


#