animationend 事件

事件對象參考手冊 事件對象

實(shí)例

在 CSS 動畫結(jié)束后為 <div> 元素添加監(jiān)聽事件:

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

// Chrome, Safari 和 Opera 代碼
x.addEventListener("webkitAnimationEnd", myStartFunction);

// 標(biāo)準(zhǔn)語法
x.addEventListener("animationend", myStartFunction);

嘗試一下 ?

定義和用法

animationend 事件在 CSS 動畫完成后觸發(fā)。

更多關(guān)于 CSS 動畫的內(nèi)容，請查看我們的CSS3 動畫 章節(jié)。

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

瀏覽器支持

表格中的數(shù)字表示支持該事件的第一個瀏覽器的版本號。

"webkit" 或 "moz" 后面指定的數(shù)字為支持該事件的第一個版本號前綴。

事件          
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);        // 標(biāo)準(zhǔn)語法

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

技術(shù)細(xì)節(jié)
是否支持冒泡:Yes
是否可以取消:No
事件類型:AnimationEvent

相關(guān)頁面

CSS 教程: CSS3 動畫

CSS 參考手冊: CSS3 動畫屬性

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


事件對象參考手冊 事件對象