最新的Web开发教程
 

animationend事件

<事件对象

做一些与<div>元素时,CSS动画结束:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);

// Standard syntax
x.addEventListener("animationend", myEndFunction);
试一试»

定义和用法

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

有关CSS动画的更多信息,请参阅我们的教程CSS3动画

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


浏览器支持

在表中的数字规定,完全支持该事件的第一个浏览器版本。

数字其次是"webkit""moz"指定的前缀工作的第一个版本。

事件
animationend 4.0的WebKit 10.0 16.0
5.0万盎司
4.0的WebKit 15.0的WebKit
12.1

注意:使用Chrome,Safari和Opera,使用webkitAnimationEnd前缀。


句法

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

注意: addEventListener()在Internet Explorer 8和更早版本不支持的方法。


技术细节

泡沫:
取消: 没有
事件类型: AnimationEvent
DOM版本: 3级事件

相关页面

CSS教程: CSS3动画

CSS参考: CSS3 animation Property

HTML DOM参考: Style animation Property


<事件对象