JavaScriptでアニメーションの終了検知をする方法！実装の手順

Webページでアニメーションを実装する際、開始はできても「いつ終了したか」を正確に検知できないとその後の処理に困ることがあります。特に、次のアニメーションの開始やDOM操作、UI変更などが終了タイミングに依存するケースでは、正しい終了検知が重要です。この記事ではCSSアニメーションやWeb Animations API、JavaScriptを使ったアニメーションで「JavaScript アニメーション 終了検知」を的確に行うための最新技術や実装例をわかりやすく解説します。実践的な手順と注意点を押さえて、読み終わる頃には実装力が大きく向上しています。

JavaScript アニメーション 終了検知を実現する主要な手法

ここでは「JavaScript アニメーション 終了検知」を実際に実現するために使われている代表的な方法を整理します。どの手法が闘mogelijkかを比較しながら、それぞれのメリットや制約を理解しておくことが成功の鍵です。

CSS Animation の animationend イベントを使う

CSS の @keyframes を使ったアニメーションが終わったタイミングで自動的に発火するイベントが animationend です。JavaScript 側で対象要素に addEventListener(“animationend”, …) を登録することで終了検知が可能です。event.animationName や event.elapsedTime プロパティでどのアニメーションが終了したかや経過時間を取得できます。ブラウザの互換性も十分確保されており、最新ブラウザで標準的にサポートされています。

CSS Transition の transitionend イベントを使う

CSS の transition プロパティを使ってプロパティの変化を滑らかに行う場合、transitionend イベントを利用して終了を検知できます。transitionend の event.propertyName を確認すれば、どの CSS プロパティの変化が終了したか識別できます。transition の遅延 delay や複数プロパティを変更する場合には注意すべき点がありますが、animationend と並んでよく使われる基本技術です。

Web Animations API の finished プロミスまたは onfinish ハンドラを使う

Web Animations API を使えば、Element.animate や Animation オブジェクトを介してアニメーションを制御できます。この API では finished プロパスがプロミスを返し、アニメーションの完了時に resolve されます。また、Animation オブジェクトの onfinish ハンドラを設定することで、終了時に処理を直接記述できます。中断された場合の oncancel 処理も用意されており、より柔軟な制御が可能です。最新ブラウザではこの方法が推奨されることが多いです。

具体的な実装手順とサンプルコード

ここからは「JavaScript アニメーション 終了検知」を行う実際のコード例を段階的に示します。CSS アニメーション・CSS トランジション・Web Animations API の各手法についてコードを確認し、どのように使い分けるかを理解してください。

CSS Animation + animationend の実装例

まずは CSS アニメーションを使い、JavaScript で animationend イベントを検知する基本例です。HTML 要素にクラスを付与してアニメーションを定義し、その終了時に処理を実行します。

<div id="box" class="animate-box">アニメーション対象</div>

.animate-box {
animation: fadeMove 2s ease-in-out;
}
@keyframes fadeMove {
from { opacity:0; transform: translateY(20px); }
to { opacity:1; transform: translateY(0); }
}

const box = document.getElementById('box');
box.addEventListener('animationend', (event) => {
 console.log('アニメーション終了:', event.animationName);
 // 次の処理をここに書く
});

このように、animationend イベントリスナーを登録することで、クラスを付与したアニメーションが完了したタイミングを正確に検知できます。1 回だけ検知したいならオプション { once: true } を使うか、処理後に removeEventListener してください。

CSS Transition + transitionend の実装例

CSS の transition を使ってスタイル変化をアニメーションさせ、その終了を transitionend イベントで検知する例です。例えば、ホバーで背景色や幅を変えるような UI の変化に用います。

<button id="btn" class="trans-btn">ホバーして遷移</button>

.trans-btn {
background-color: lightblue;
transition: background-color 1s, width 0.5s;
width: 100px;
}
.trans-btn:hover {
background-color: skyblue;
width: 150px;
}

const btn = document.getElementById('btn');
btn.addEventListener('transitionend', (event) => {
 console.log('transition 終了したプロパティ:', event.propertyName);
});

複数のプロパティに対する transition が一度に発生した際には、プロパティ名でどれが終わったか判定し、全ての終了を待つようなロジックを自前で追加する必要があります。

Web Animations API を使った完成検知例

Web Animations API を使うとアニメーションオブジェクトが返され、このオブジェクトの finished プロミスもしくは onfinish ハンドラで終了検知が行えます。複数のアニメーションを順に実行する際などに特に便利です。

const el = document.querySelector('.box-waapi');
const animation = el.animate([
 { transform: 'translateX(0px)', opacity: 0 },
 { transform: 'translateX(100px)', opacity: 1 }
], {
 duration: 1000,
 fill: 'forwards',
 easing: 'ease-in-out',
 iterations: 1
});

// onfinish ハンドラを使う
animation.onfinish = () => {
 console.log('WAAPI アニメーション終了（onfinish）');
};

// または finished プロミスを使う
animation.finished.then(() => {
 console.log('WAAPI アニメーション終了（Promise）');
}).catch((error) => {
 console.log('アニメーションがキャンセルされた', error);
});

この手法の利点は、アニメーションの中断やキャンセルに対応できることと、プロミスチェーンで複雑なアニメーションの連鎖を簡潔に記述できることです。

手法比較と選び方のポイント

上述の手法を状況に応じて使い分けるために、比較表と選び方の目安を示します。これによって「どの手法が自分の環境や要件に最適か」が判断できます。

選択の目安

アプリケーションの規模や対象ブラウザ、利用するアニメーションの種類によって、以下のような基準で手法を選ぶと良いです。

• 単純な CSS アニメーションであれば animationend が最も手軽。
• hover やドラッグなどの UI 用アニメーションで CSS の transition を活用する場面があるなら transitionend を使う。
• 複雑なシーケンスや中断・再生などの制御が必要な場合は Web Animations API の finished プロミスや onfinish。
• 対応ブラウザが限られる環境や古い端末への対応が必要なら、ポリフィルや代替コードも検討。

高度な検知パターンと応用ケース

基本を押さえたら、さらに応用的な検知パターンを学ぶことで制作の幅が広がります。複数アニメーションの連鎖、疑似要素（pseudo-element）、条件付き終了、キャンセルの扱いなどが代表例です。

複数のアニメーションの終了をまとめて待つ

例えば複数の要素が同時にアニメーションし、それら全てが終わってから次の処理をしたい場合、Promise やイベントリスナーを組み合わせます。Web Animations API なら anim.finished を複数集めて Promise.all で待てます。一方 CSS アニメーションであれば、それぞれの要素に animationend を登録し、すべての終了を数えてから処理実行する仕組みを作ることも可能です。

疑似要素のアニメーション終了を検知する

:before や :after の疑似要素で定義された CSS アニメーションも、親要素で animationend イベントを検知できます。疑似要素自身は DOM 要素ではないため、親要素に listener を設定します。event.pseudoElement プロパティでどちらの疑似要素かを判定できることもあります。ただしブラウザ互換性にばらつきがあるためテストが重要です。

キャンセル・中断イベントの扱い

アニメーションが途中で止まったり要素が削除されたりすると、animationend や onfinish が呼ばれないケースがあります。CSS アニメーションでは animationcancel を使える場合があり、Web Animations API では oncancel ハンドラや finished プロミスの reject を捕まえることで処理分岐ができます。ユーザー操作やレスポンシブ設計で途中キャンセルがあり得る場合は必ず対応を入れましょう。

実務でよくあるトラブルとその解決策

実装を進める中で遭遇しやすい問題と、その対処法を複数紹介します。この記事内容を活用すれば不具合の発見と修正が迅速になるでしょう。

アニメーション名が取得できない／区別できない

同じ要素に複数のアニメーション名を設定していたり、animation-name を省略していたりすると、event.animationName が空になったり、複数のアニメーションの区別が不明になることがあります。解決策として、keyframes や animation-name を明示的に設定し、それをイベント内で比較して処理を分岐させる方法が有効です。

遅延（delay）や反復（iteration）のあるアニメーションで finish イベントが遅れる／複数回発火する

animation-delay や animation-iteration-count を使っている場合、アニメーションが完了するタイミングが予想より後になることがあります。また、iteration-count が複数なら animationend は最後の反復後に発火します。Web Animations API を使えばオプションで iterations を制御できます。CSS の場合は延長を考慮してコードでの待ち時間を動的に取得・計算する設計が望ましいです。

対応ブラウザの違いによる動作のばらつき

古いブラウザでは animationend にベンダープレフィックスが必要だったり、疑似要素の pseudoElement プロパティがサポートされていない場合があります。また Web Animations API の finished プロミスや onfinish の部分が未実装なブラウザもあります。実際のユーザー環境を想定して動作確認を行い、必要ならポリフィルやフォールバック処理を含めるのが安全です。

まとめ

JavaScript で「アニメーションの終了検知」を正確に行うためには、CSS Animation の animationend イベント、CSS Transition の transitionend イベント、Web Animations API の finished プロミスや onfinish ハンドラのいずれかを用いるのが基本です。要件に応じてこれらを組み合わせたりフォールバックを用意したりすることで、実装の信頼性が向上します。

複数アニメーションを連鎖させるケース、疑似要素を使うケース、キャンセルを扱うケースなど、実務で遭遇するパターンにも対応できるように備えておくことが重要です。しっかり設計しテストを重ねることで、「JavaScript アニメーション 終了検知」があなたのプロジェクトで機能する強力な技術となるでしょう。