CSS3アニメーションの完了時にコールバックを使用する方法 - JavaScriptの解説

transitionend イベントの使用: CSS3のtransitionプロパティを使用してアニメーションを設定している場合、transitionend イベントを使用してアニメーションの完了を検知することができます。以下は、この方法のコード例です。

const element = document.getElementById('myElement');
function animationCallback() {
  // アニメーションが完了した後に実行したい処理を記述する
  console.log('アニメーションが完了しました！');
}
element.addEventListener('transitionend', animationCallback);

requestAnimationFrame 関数の使用: requestAnimationFrame 関数を使用すると、ブラウザの次の再描画時にコールバック関数を呼び出すことができます。アニメーションの完了を検知するために、アニメーションが終了した後に requestAnimationFrame を呼び出す方法があります。以下は、この方法のコード例です。

const element = document.getElementById('myElement');
function animationCallback() {
  // アニメーションが完了した後に実行したい処理を記述する
  console.log('アニメーションが完了しました！');
}
function checkAnimationStatus() {
  if (element.style.animationPlayState === 'paused') {
    animationCallback();
  } else {
    requestAnimationFrame(checkAnimationStatus);
  }
}
requestAnimationFrame(checkAnimationStatus);

CSSアニメーションライブラリの使用: さまざまなCSSアニメーションライブラリ（例: Animate.css、Velocity.js）では、アニメーションの完了時にコールバックを提供する便利なメソッドやオプションが用意されている場合があります。これらのライブラリを使用すると、簡単にアニメーションの完了を検知することができます。使用するライブラリのドキュメントを参照してください。

以上が、CSS3アニメーションの完了時にコールバックを使用する方法のいくつかです。これらの方法を利用することで、アニメーションの完了を検知し、適切な処理を行うことができます。