animationend

アニメーションエンド（イベント）

意味 CSSアニメーションが終了したときのイベント。

animationendとは？

CSSアニメーションが終了したときに発火するイベント。アニメーションの終了を検出するのに使用します。

animationendの具体的な使い方

アニメーション終了イベントを検知する例

<style>
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

#animatedElement {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>

<div id="animatedElement"></div>
<button onclick="startAnimation()">アニメーション開始</button>

<script>
function startAnimation() {
  const element = document.getElementById('animatedElement');
  element.style.animation = 'fadeOut 2s';

  element.addEventListener('animationend', function(event) {
    console.log(`アニメーション終了: ${event.animationName}`);
    element.style.display = 'none';
  });
}
</script>

要素にフェードアウトアニメーションを適用し、アニメーションが終了したときにコンソールにメッセージを出力し、要素を非表示にします。

animationendに関するよくある質問

Q. animationendはいつ発火しますか？

A. animationendイベントは、CSSアニメーションが完全に終了したときに発火します。ただし、animation-iteration-countが無限(infinite)に設定されている場合、このイベントは発火しません。

Q. 複数のアニメーションがある場合は？

A. 要素に複数のアニメーションが適用されている場合、各アニメーションが終了するたびにanimationendイベントが発火します。全てのアニメーションの完了を待つ場合は、イベントの回数を管理する必要があります。

Q. アニメーション中断時の動作は？

A. アニメーションが途中で中断された場合（例：要素が非表示になった場合）、animationendイベントは発火しません。アニメーションの完全な終了のみを検知します。

animationendが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのanimationendやkeydown、event.target、dragstart、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。