CSS3 アニメーションの完了時にコールバックをトリガーするにはどうすればよいですか?

CSS3 アニメーションのコールバック

CSS3 アニメーションは印象的なアニメーション効果を提供しますが、完了時にコールバックを実装する柔軟性に欠けています。この記事では、イベント リスナーを活用することで、この問題に対する解決策を検討します。

問題:

CSS3 アニメーションの終了時にコールバック関数をトリガーするにはどうすればよいでしょうか? JavaScript アニメーションはコールバックをサポートしていますが、CSS3 アニメーションには同様の機能が欠けているようです。

解決策:

CSS3 アニメーションはコールバック メカニズムを直接提供しませんが、次のようなイベントを発行します。イベントリスナーを使用してキャプチャされます。これにより、これらのイベントが発生したときにコールバックを実行できるようになります。ここでは 2 つの方法を示します。

1. jQuery の使用:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

2. Pure JavaScript の使用:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

これらのイベント リスナーはアニメーションの完了を検出し、指定されたコールバック関数をトリガーします。これにより、アニメーションの完了時にコールバックが確実に実行されます。

ライブ デモ:

実際のデモについては、http://jsfiddle にあるライブ フィドルを参照してください。 net/W3y7h/ では、コールバック機能の動作を確認できます。

以上がCSS3 アニメーションの完了時にコールバックをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。