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

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

Web 開発の領域では、CSS3 アニメーションでコールバック関数をトリガーできるか?という疑問が生じます。 JavaScript アニメーションはこの機能を提供しますが、CSS3 の対応物にはそのような固有のサポートがありません。

この制限を回避するには、アニメーションが本質的にイベントそのものであるという事実を利用して、CSS3 アニメーションをイベント リスナーと組み合わせることができます。 jQuery または純粋な JavaScript を使用することで、開発者はこれらのイベントをサブスクライブし、完了時に指定されたコールバックを呼び出すことができます。

jQuery:

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

Pure JavaScript:

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

これらのイベント リスナーは、任意のイベント リスナーにアタッチできます。アニメーション化された HTML 要素。アニメーションがエンドポイントに到達すると、指定されたコールバック関数が実行されます:

注: ブラウザーが異なると、イベント リスナー名にさまざまなプレフィックスが表示される場合があります。提供されている例は、一般的なプレフィックスをカバーしており、主要なブラウザ間での互換性を確保しています。

ライブ デモンストレーションについては、次のサイトにアクセスしてください:

http://jsfiddle.net/W3y7h/

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