完了後の CSS3 アニメーションの動作を制御するにはどうすればよいですか?

CSS3 アニメーションの終了動作の制御

魅力的な CSS3 アニメーションを作成する場合、多くの場合、完了時の動作を制御する必要があります。一般的な要件の 1 つは、最後のフレームでアニメーションをフリーズすることです。

最後のフレームでアニメーションをフリーズ

提供されたコードは、ターゲット要素を画面から削除することで終了する 4 つの部分からなるアニメーションを示しています。ただし、実行後は元の状態に戻ることを繰り返します。この問題に対処するには、animation-fill-mode プロパティを利用できます。

animation-fill-mode: forwards;

このプロパティを forwards に設定すると、アニメーションは完了後も最終状態のままになります。要素はアニメーションの最後のフレーム (100%) でフリーズしたように表示されます。

また、アニメーション後に要素をページから完全に削除したい場合は、次の方法を適用できます。

-webkit-animation-end: animation_final_frame;

ここで、animation_final_frame は、アニメーションが終了するときに実行される CSS 関数の名前です。その関数内で、JavaScript または jQuery を使用して DOM から要素を削除するロジックを追加できます。

アニメーション フィル モード情報

アニメーション フィル モードの詳細については、Mozilla Developer を参照してください。ネットワーク (MDN) または CanIuse のブラウザ サポート リストを参照してください。

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