animationend 事件
示例
在 CSS 動畫結束後執行某些操作
const div1 = document.getElementById("myDIV");
div1.addEventListener("animationend", myEndFunction);
自己動手試一試 »
描述
當 CSS 動畫完成時,會觸發 animationend 事件。
動畫事件
| 事件 | 發生時間 |
|---|---|
| animationstart | CSS 動畫已開始 |
| animationend | CSS 動畫已完成 |
| animationiteration | CSS 動畫重複播放 |
動畫屬性
| 屬性 | 描述 |
|---|---|
| animationName | 動畫的名稱 |
| elapsedTime | 動畫已執行的秒數 |
| pseudoElement | 動畫的偽元素的名稱 |
另請參閱
教程
技術詳情
| 冒泡 | 是 |
|---|---|
| 可取消 | 否 |
| 事件型別 | AnimationEvent |
| DOM 版本 | Level 3 Events |
瀏覽器支援
onanimationend 是 DOM Level 3 (2004) 功能。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |