MENU
  1. HOME
  2. JavaScript
  3. CSSのアニメーションを検知してJavaScriptで制御する方法
JavaScript - 2025-08-05

CSSのアニメーションを検知してJavaScriptで制御する方法

Hatena Pocket LINE

ウェブサイトに動きをつけるCSSアニメーションは、ユーザー体験を豊かにするための強力なツールです。しかし、単にアニメーションを再生するだけでなく、「アニメーションが始まったら何かをする」「アニメーションが繰り返されるたびに何かを変える」「アニメーションが終わったら次の動きに移る」といった、より複雑なインタラクションを実現したい場合があります。

ここで活躍するのが、CSSアニメーションのタイミングをJavaScriptで検知できるイベントです。これらのイベントを利用することで、CSSとJavaScriptを連携させ、よりダイナミックなウェブサイトを構築することが可能になります。

1. CSSアニメーションイベントとは？

CSSアニメーションは、@keyframesルールとanimationプロパティを使って定義されます。
要素にアニメーションが適用されると、そのライフサイクル（開始、繰り返し、終了）の特定の瞬間に、ブラウザがJavaScriptに対してイベントを発行します。これらのイベントをaddEventListenerで監視することで、アニメーションの進行状況に応じてJavaScriptのコードを実行できます。

イベントの基本的な使い方

要素にCSSアニメーションが適用されている場合、JavaScriptで以下のようにイベントリスナーを設定します。

const animatedElement = document.getElementById('myAnimatedElement');

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

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

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

イベントリスナーに渡されるeventオブジェクトは、通常のEventオブジェクトのプロパティに加えて、アニメーションに関する追加情報を持つAnimationEventオブジェクトです。特に以下のプロパティが役立ちます。

  • event.animationName: 発生したアニメーションの@keyframesルールの名前。
  • event.elapsedTime: アニメーションが開始されてからの経過時間（秒単位）。

2. animationstart：アニメーション開始の合図

animationstartイベントは、CSSアニメーションが要素に適用され、実際に再生が開始された瞬間に発生します。

役割

  • アニメーションが始まる直前の準備や、アニメーション開始と同時に何かをトリガーしたい場合に利用します。
  • 要素の初期状態を調整したり、アニメーション開始をユーザーに通知したりするのに使えます。

使用例：アニメーション開始時にテキストを変更する

特定の要素が画面に現れるアニメーションを開始する際に、その要素内のテキストを動的に変更する例です。

HTML

<div id="messageBox" class="fade-in">
    <span>準備中...</span>
</div>

CSS

.fade-in {
    opacity: 0;
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

JavaScript

const messageBox = document.getElementById('messageBox');
const messageSpan = messageBox.querySelector('span');

messageBox.addEventListener('animationstart', (event) => {
    if (event.animationName === 'fadeInAnimation') {
        messageSpan.textContent = 'ようこそ！アニメーションが始まりました！';
        console.log('メッセージボックスのアニメーションが開始しました。');
    }
});

応用例

  • アニメーション開始時に、関連する別の要素を非表示にする。
  • アニメーション開始時に、ユーザーの操作を一時的に無効にする（アニメーション完了まで）。
  • アニメーションの開始をログに記録する。

3. animationiteration：繰り返しの節目を捉える

animationiterationイベントは、animation-iteration-countプロパティがinfinite（無限）または1より大きい値に設定されているアニメーションが、1回の繰り返しを完了し、次の繰り返しが開始される直前に発生します。

役割

  • 無限に繰り返されるアニメーションの途中で、要素の状態を変化させたい場合に利用します。
  • アニメーションの繰り返し回数をカウントしたり、特定の繰り返しで異なる動作をさせたりするのに使えます。

使用例：繰り返しごとに色を変える

要素が点滅するアニメーションを繰り返すたびに、その背景色を切り替える例です。

HTML

<div id="colorBox" class="blink-animation"></div>

CSS

#colorBox {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: blinkColor 2s infinite alternate; /* infiniteで無限繰り返し */
}

@keyframes blinkColor {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

JavaScript

const colorBox = document.getElementById('colorBox');
const colors = ['red', 'blue', 'green', 'purple'];
let colorIndex = 0;

colorBox.addEventListener('animationiteration', (event) => {
    if (event.animationName === 'blinkColor') {
        colorIndex = (colorIndex + 1) % colors.length;
        colorBox.style.backgroundColor = colors[colorIndex];
        console.log(`アニメーションが繰り返され、色が ${colors[colorIndex]} に変わりました。`);
    }
});

応用例

  • スライドショーで、各スライドのアニメーションが完了するたびに次のスライドに切り替える。
  • ローディングアニメーションで、特定の繰り返し回数に達したらメッセージを表示する。
  • ゲーム内で、キャラクターの特定の動作アニメーションが繰り返されるたびに効果音を再生する。

4. animationend：アニメーション完了の瞬間

animationendイベントは、CSSアニメーションがその最終的な繰り返しを完了し、停止した瞬間に発生します。

役割

  • アニメーションが完全に終了した後に、要素を非表示にしたり、別の状態に移行させたり、次のアニメーションを開始したりする場合に利用します。
  • アニメーションのクリーンアップ処理（一時的なクラスの削除など）にも使われます。

使用例：アニメーション終了後に要素を削除する

要素がフェードアウトするアニメーションが完了したら、その要素をDOMから完全に削除する例です。

HTML

<div id="disappearingMessage" class="fade-out">
    <span>このメッセージは消えます...</span>
</div>

CSS

.fade-out {
    opacity: 1;
    animation: fadeOutAnimation 1.5s forwards; /* forwardsでアニメーション終了時の状態を維持 */
}

@keyframes fadeOutAnimation {
    from { opacity: 1; }
    to { opacity: 0; }
}

JavaScript

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

disappearingMessage.addEventListener('animationend', (event) => {
    if (event.animationName === 'fadeOutAnimation') {
        disappearingMessage.remove(); // 要素をDOMから削除
        console.log('メッセージが完全に消えました。');
    }
});

応用例

  • 要素の登場アニメーションが終了した後、ユーザーが操作できるようにする。
  • エラーメッセージのアニメーション表示後、自動的に非表示にする。
  • 複数のアニメーションを順番に再生する「アニメーションの連鎖」を実装する。

5. 複数のアニメーションとイベント

一つの要素に複数のCSSアニメーションが同時に適用されている場合、各アニメーションが開始、繰り返し、終了するたびにそれぞれのイベントが発生します。event.animationNameプロパティを使って、どの特定のアニメーションに関するイベントなのかを判別することが重要です。

const multiAnimatedElement = document.getElementById('multiAnimated');

multiAnimatedElement.addEventListener('animationend', (event) => {
    if (event.animationName === 'moveAnimation') {
        console.log('移動アニメーションが終了しました。');
    } else if (event.animationName === 'scaleAnimation') {
        console.log('拡大縮小アニメーションが終了しました。');
    }
});

まとめ

CSSアニメーションイベント（animationstart, animationiteration, animationend）は、JavaScriptとCSSアニメーションを連携させ、ウェブサイトに高度なインタラクティブ性と動的な振る舞いをもたらすための不可欠なツールです。

これらのイベントを理解し、適切に活用することで、以下のようなことが可能になります。

  • アニメーションの開始、繰り返し、終了に合わせてJavaScriptの処理をトリガーする。
  • アニメーションの途中で要素の状態を動的に変更する。
  • 複数のアニメーションを連鎖させたり、複雑なシーケンスを制御したりする。
  • アニメーション完了後のクリーンアップ処理を行う。
Hatena Pocket LINE

Prev

【JavaScript】addEventListenerについて

Next

WordPress PHPファイルをショートコードで呼び出す方法
Related Posts

Related Posts

JQuery セレクトボックスで表示を切り替える方法

2022-03-30

Node.jsをバージョン管理する方法-Windows・Mac

2019-07-03

JQueryでヘッダー固定時のアンカーリンク対策-レスポンシブ対応

2018-03-25

JQueryで動画・画像をランダムに再生させる方法

2019-08-26

脱JQuery！JavaScriptでハンバーガーメニューを実装する(JQueryのサンプルあり)

2020-07-01

SNSのシェアボタンをJavaScriptで実装する方法と応用テクニック

2025-07-20

ロードアニメーション表示中のスクロールをJavaScriptで禁止する方法

2022-01-25

JavaScriptで文字列を1文字ずつspanタグで囲む方法：CSSアニメーションへの応用

2022-01-23