animationstart

アニメーションスタート（イベント）

意味 CSSアニメーションが開始されたときのイベント。

animationstartとは？

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

animationstartの具体的な使い方

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

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

const square = document.getElementById('animatedSquare');
square.style.animation = 'none';

square.addEventListener('animationstart', (event) => {
  console.log(`アニメーション開始: ${event.animationName}`);
});

square.style.animation = 'rotate 3s linear';

👇出力結果

アニメーション開始: rotate

正方形要素にアニメーションを適用し、アニメーションが開始されたときにコンソールにメッセージを出力します。

animationstartに関するよくある質問

Q. animationstartの用途は？

A. animationstartイベントは、CSSアニメーションが開始された瞬間を検知するために使用します。このイベントを利用することで、アニメーション開始時に特定の処理を実行したり、ユーザーに通知したりすることができます。

Q. 遅延付きアニメーションの場合は？

A. animation-delayプロパティで遅延を設定している場合、animationstartイベントは遅延後、実際にアニメーションが開始される時点で発火します。遅延開始時点ではなく、視覚的な変化が始まる時点でイベントが発生します。

Q. JavaScriptでアニメーション追加時は？

A. JavaScriptでstyle.animationプロパティを使用してアニメーションを追加した場合、animationstartイベントリスナーは必ずアニメーション追加後に設定してください。そうしないと、イベントを逃す可能性があります。

animationstartが学べる書籍の紹介

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

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