3_5 CSS Animationsのイベント

CSS Animationsのイベント、つまり、キーフレームアニメーションのイベントの発生は、アニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。

イベントには次のものがあります。

animationstart

CSS Animationsがスタートするときに発生する。animation-delayプロパティが設定されているときには、その遅延時間が経過した後、発生する。

animationend

CSS Animationsが終了したときに発生する。

animationiteration

CSS Animationsの各繰り返しが終わったときに発生する。たとえば、繰り返しの１回め、２回めに発生する。

animationcancel

たとえばアニメーション名が削除されたときなど、CSS Animationsが予期せず中断されたときに発生する。

addEventListener()メソッドには、AnimationEventオブジェクトが引数として渡されます。このオブジェクトは、次のプロパティを持っています。

animationName

animation-name CSSプロパティの値。

elapsedTime

アニメーションの経過時間。

使い方のデモリンク。[スタート]ボタンのクリックでアニメーションが始まります。

// minomushiクラスが適用されたdiv要素への参照
const minomushi = document.querySelector('.minomushi');

// ボタンがクリックされたら
document.getElementById('start-button').addEventListener('click', ()=>{
  // minomushi divにbreezeクラスを追加。
  // これにより、みの虫の画像が表示され、アニメーションが開始される
  minomushi.classList.add('breeze')
}, false);

// breezeアニメーションのスタートを監視する
minomushi.addEventListener('animationstart', (e)=>{
  info('animationstartイベント発生');
}, false);

// breezeアニメーションの繰り返しを監視する
minomushi.addEventListener('animationiteration', (e)=>{
  info('animationiterationイベント発生');
}, false);

// breezeアニメーションの終了を監視する
minomushi.addEventListener('animationend', (e)=>{
  info('animationendイベント発生');
  info('アニメーション名は、' + e.animationName);
  info('経過時間は、'+ e.elapsedTime);
}, false);

上記の例では、次のbreezeクラスを使っています。

.breeze{
  background: url("images/minomushi.png") no-repeat;
  animation: breeze 2s ease-in-out 3 alternate;
}

上記のサンプルコードを実行すると、animationstartイベントはアニメーションの開始時に１回発生し、animationendイベントはアニメーションの終了時に１回発生することが分かります。

またanimationiterationイベントは、アニメーションの１周期が終わってalternateで反転するときに発生することが分かります（今の場合は２回）。３回めに発生するタイミングでは、animationendイベントが発生します。

animationcancelイベントは、たとえばanimationiterationイベントを監視するイベントリスナーで、minomushi.classList.remove(‘breeze’);を実行すると、強制的に発生させることができます。

AnimationEventオブジェクトの各プロパティは、リスナー関数に渡されるオブジェクト(e)のe.animationName、e.elapsedTimeプロパティとしてアクセスできます。