animationstart event


animationstart 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 animationstart event is triggered when the CSS animation starts playing.

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.

##animationstart4.0 webkit10.0 16.04.0 webkit15.0 webkit
event




5.0 moz
12.1

Note: Chrome, Safari and Opera browsing device use webkitAnimationEnd prefix.

grammar

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

Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical details
Whether bubbling is supported:YesCan be canceled:NoEvent type:AnimationEvent

##Related pages

CSS Tutorial: CSS3 Animation

CSS Reference Manual: CSS3 Animation Properties

HTML DOM Reference Manual: Style Animation Properties

←
→