AnimationEvent インターフェイス
AnimationEvent インターフェイスは、CSS アニメーションにおけるイベントに関する Event インターフェイスです。
ここでいう CSS アニメーションとは、ゲームや動画のようなアニメーションではなく、タグエレメントに設定された影や形に変化を持たせることができるもののことです。
- Event
- └── AnimationEvent
Event インターフェイスを継承しています。Event インターフェイスの Property と Method が使えます。
AnimationEvent オブジェクトとは、animationcancel や animationend、animationiteration、animationstart といったイベントを捉えたときに取得できる event オブジェクトです。
document.getElementById('example').addEventListener("animationstart", (event)=>{
console.log( event );
});
詳しくは Example を参照してください
ページ内 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_);
Example
AnimationEvent オブジェクトの取得例です。以下の「確認」ボタンをクリックしてください。Example が動きます。
ポインターをエレメント上にもっていくと CSS アニメーションが始まります。開発用コンソールに 取得できた AnimationEvent オブジェクトが表示されます。