CSSリファレンス

animation-fill-modeの意味と使い方

「animation-fill-mode」を使うと、アニメーションの待機中と完了後のスタイルを指定できます。待機中とはanimation-delayプロパティで指定するアニメーションの待機時間を、完了後とはanimation-durationプロパティで指定するアニメーションの実行時間が経過した後を指します。
それぞれ最初または最後のキーフレームで定義されているスタイルが適用されますが、animation-directionプロパティやanimation-iteration-countプロパティの値によって「最初」と「最後」の定義が異なってきますので注意してください。
複数のアニメーションを待機中/完了後のスタイルを変えて適用する場合は、それぞれに対応するスタイルを「,」で区切って記述します。

値の指定方法

none

アニメーションの待機中と完了後のスタイルは変更されません。


forwards

アニメーションの完了後に、最後のキーフレームで設定されているスタイルを保持します。


backwards

アニメーションの待機中に、最初のキーフレームで設定されているスタイルを適用します。


both

「forwards」と「backwards」の両方の規定に従います。アニメーションの待機中には最初のキーフレームで設定されているスタイルを、アニメーションの待機中には最初のキーフレームで設定されているスタイルを、アニメーションの完了後には最後のキーフレームで設定されているスタイルを適用します。