animationend 事件

实例

当 CSS 动画结束时,对 <div> 元素做一些事情:

var x = document.getElementById("myDIV");

// 针对 Chrome、Safari 以及 Opera 的代码
x.addEventListener("webkitAnimationEnd", myEndFunction);

// 标准语法
x.addEventListener("animationend", myEndFunction);

亲自试一试

定义和用法

当 CSS 动画完成时发生 animationend 事件。

如需有关 CSS 动画的更多知识,请学习我们的 CSS3 动画教程

当 CSS 动画播放时,可能会发生三个事件:

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

数字后面的 "webkit" 或 "moz" 注明了使用前缀的首个版本。

事件 Chrome IE Firefox Safari 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 或更早的版本不支持 addEventListener() 方法

技术细节

冒泡: 支持
可取消: 不支持
事件类型: AnimationEvent
DOM 版本: Level 3 Events

相关页面

CSS 教程:CSS3 动画

CSS 参考手册:CSS3 animation 属性

HTML DOM 参考手册:Style animation 属性