AnimationEvent インターフェイス
AnimationEvent インターフェイスは、CSSアニメーションにおけるイベントに関する Event インターフェイスです。
- Event
- └── AnimationEvent
Event インターフェイスを継承しています。Event インターフェイスの Property と Method が使えます。
ページ内 Index
プロパティ(Properties)
以下は AnimationEvent インターフェイスのプロパティです。
| Property | |
|---|---|
| animationName | CSSアニメーション名 |
| elapsedTime | CSSアニメーションが実行された秒数 |
| pseudoElement | CSS アニメーションが実行されている疑似エレメントを取得。疑似エレメントでCSS アニメーションが実行されている場合のみ |
Event インターフェイスから継承された プロパティも利用できます。
AnimationEvent インターフェイスのプロパティは以下のように使用します。
var boole = event.bubbles; var animation_name = event.animationName;
メソッド(Methods)
独自のメソッドはありません。
イベント(Event)
AnimationEvent のイベントは、CSS アニメーションを定義したエレメントに設定します。
AnimationEvent に関するイベントには以下があります。
| animationcancel ( onanimationcancel ) | CSS アニメーションが中断されたら |
| animationend ( onanimationend ) | CSS アニメーションが終了したら |
| animationiteration ( onanimationiteration ) | CSS アニメーションが一通り再生したら |
| animationstart ( onanimationstart ) | CSS アニメーションが開始したら |
以下はイベントの使用方法の例です。
in HTML
<tagelement onanimationstart="oneFunction()">
in JavaScript
object.onanimationstart = function(){ };
object.addEventListener("animationstart", script_);