Categories: DOM对象tips

animationend 事件 | HTML DOM 事件对象

返回到：DOM 对象：HTML DOM 事件对象

定义和用法

animationend 事件在 CSS 动画完成后触发。

CSS 动画播放时，会发生以下三个事件：

animationstart – CSS 动画开始后触发
animationiteration – CSS 动画重复播放时触发
animationend – CSS 动画完成后触发

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

“webkit” 或 “moz” 后面指定的数字为支持该事件的第一个版本号前缀。

事件	谷歌	IE	火狐	苹果	opera
animationend	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

注意： Chrome, Safari 和 Opera 浏览器使用 webkitAnimationEnd 前缀。

语法

object.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari 和 Opera
object.addEventListener("animationend", myScript);        // 标准语法

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

技术细节

是否支持冒泡:	Yes
是否可以取消:	No
事件类型:	AnimationEvent

实例

在 CSS 动画结束后为 <div> 元素添加监听事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<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" >

terry

这个人很懒，什么都没有留下～