animationstart 事件

2023-04-11 15:18 更新

事件對(duì)象參考手冊(cè)事件對(duì)象

實(shí)例

在 CSS 動(dòng)畫開始播放時(shí)為 <div> 元素添加監(jiān)聽事件:

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

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

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

嘗試一下 ?

定義和用法

animationstart 事件在 CSS 動(dòng)畫開始播放時(shí)觸發(fā)。

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

CSS 動(dòng)畫播放時(shí)，會(huì)發(fā)生以下三個(gè)事件：

  • animationstart - CSS 動(dòng)畫開始后觸發(fā)
  • animationiteration - CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā)
  • animationend - CSS 動(dòng)畫完成后觸發(fā)

瀏覽器支持

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

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

事件          
animationstart 4.0 webkit 10.0  16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

注意： Chrome, Safari 和 Opera 瀏覽器使用webkitAnimationEnd 前綴。

語(yǔ)法

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

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

技術(shù)細(xì)節(jié)

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

相關(guān)頁(yè)面

CSS 教程: CSS3 動(dòng)畫

CSS 參考手冊(cè): CSS3 動(dòng)畫屬性

HTML DOM 參考手冊(cè): Style 動(dòng)畫屬性

事件對(duì)象參考手冊(cè)事件對(duì)象
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)