【JavaScript】animationstart / animationend / animationiteration – CSSアニメーションのタイミングを検知して発生するイベント

CSSアニメーションとJavaScriptを組み合わせることで、インタラクティブなWebアプリケーションを作成できます。その際に役立つイベントが、animationstart、animationend、animationiterationです。これらのイベントを活用することで、アニメーションの開始、終了、繰り返しのタイミングを検知して動的な処理を追加できます。

目次非表示

アニメーションイベントとは?
基本的な使い方
サンプルコード
1. ボタンをクリックしてアニメーションをトリガー
2. 動的なアニメーションの管理
さいごに

アニメーションイベントとは?

アニメーションイベントは、CSSの@keyframesアニメーションと連携し、アニメーションの過程に発生するイベントを検知するためのものです。

animationstart

アニメーションが開始した瞬間に発生します。
複数のアニメーションが同じ要素で動作している場合、どのアニメーションが発生したかはevent.animationNameで取得可能です。

animationend

アニメーションが最後のフレームを再生し終わったときに発生します。
繰り返しが設定されている場合（animation-iteration-count: infinite;など）、繰り返しの最後には発生しません。

animationiteration

アニメーションが１ループ完了した時点で発生します。
アニメーションがanimation-iteration-countで指定された回数だけ繰り返される場合、各ループの終了時にイベントが発生します。

JavaScript

element.addEventListener('animationstart', (event) => {
  console.log('アニメーションが開始しました:', event);
});

element.addEventListener('animationend', (event) => {
  console.log('アニメーションが終了しました:', event);
});

element.addEventListener('animationiteration', (event) => {
  console.log('アニメーションが繰り返されました:', event);
});

上記のようにaddEventListenerを使ってイベントを検知します。

基本的な使い方

以下は、CSSアニメーションとJavaScriptを組み合わせたシンプルな例です。

See the Pen Untitled by tones (@tonescodedesign) on CodePen.

JavaScript

const box = document.querySelector('.animated-box');

// アニメーション開始時
box.addEventListener('animationstart', (event) => {
  console.log('アニメーションが開始されました:', event.animationName);
  box.style.border = '2px solid green';
});

// アニメーション終了時
box.addEventListener('animationend', (event) => {
  console.log('アニメーションが終了しました:', event.animationName);
  box.style.border = '2px solid red';
});

// アニメーションの繰り返し時
box.addEventListener('animationiteration', (event) => {
  console.log('アニメーションが繰り返されました:', event.animationName);
  box.style.backgroundColor = box.style.backgroundColor === 'skyblue' ? 'lightcoral' : 'skyblue';
});

HTML

<div class="animated-box"></div>

CSS

.animated-box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  animation: bounce 2s infinite;
  margin: 50px auto;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

サンプルコード

ボタンをクリックしてアニメーションをトリガー

See the Pen animationstart / animationend / animationiteration by tones (@tonescodedesign) on CodePen.

JavaScript

const box = document.getElementById('box');
const button = document.getElementById('trigger');

button.addEventListener('click', () => {
  box.classList.add('animate');
});

box.addEventListener('animationstart', () => {
  console.log('アニメーションが開始されました');
});

box.addEventListener('animationend', () => {
  console.log('アニメーションが終了しました');
  box.classList.remove('animate'); // アニメーション終了後にクラスを削除
});

HTML

<button id="trigger">アニメーション開始</button>
<div class="box" id="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 50px auto;
}

.animate {
  animation: scaleUp 1s forwards;
}

@keyframes scaleUp {
  0% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

動的なアニメーションの管理

ユーザー入力に応じてアニメーションを適用し、終了時に次の動作を開始する例です。

See the Pen animationstart / animationend / animationiteration by tones (@tonescodedesign) on CodePen.

JavaScript

const circle = document.getElementById('circle');

circle.addEventListener('animationend', () => {
  console.log('アニメーションが終了しました');
  circle.style.backgroundColor = 'lightcoral';
});

// アニメーションを動的に適用
circle.addEventListener('click', () => {
  circle.style.animation = 'moveRight 2s forwards';
});

HTML

<div class="circle" id="circle"></div>

CSS

.circle {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  border-radius: 50%;
  margin: 50px auto;
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}