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

JSアニメーションを行うと、1つのアニメーションが完了した後にイベントをトリガーしたり、1つのアニメーションが完了した後に別のアニメーションを実行したりするなど、コールバック処理を行う必要があることがよくありますが、CSS3アニメーションを使用すると動きをキャプチャできますか?ステータスのコールバック処理について?

CSS3 アニメーションはコールバックでも処理できます。1 つはトランジション [w3c ドキュメント]、もう 1 つはアニメーション [w3c ドキュメント] の 2 つの属性に分かれています。

1.トランジション

トランジションの場合は、transitionend イベントをリッスンして、アニメーションが完了したときにそれをトリガーできます。

2.アニメーション

アニメーションの場合は、animationend イベントをリッスンできます。サンプルコードは次のとおりです。

上記は最近H5ページを作る際に利用しているCSS3のアニメーションコールバック処理についてまとめてみました。