CSS
Cascading Style Sheets animation-fill-mode property.
animation-fill-mode
animation-fill-modeプロパティは、CSSアニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation を使用すると便利です。
Syntax
animation-fill-mode: スタイル;
- 初期値
- none
- 継承
- なし
- 適用される要素
- 全ての要素、:before、:after擬似要素
- モジュール
- CSS Animations Module Level 3
値の指定方法
- none
- スタイルを指定しません。アニメーション再生後は、元のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます。
- backwards
- アニメーション再生後は、最初のキーフレーム（0%）のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム（0%）のスタイルが適用されます。
- forwards
- アニメーションの再生後は、最後のキーフレーム（100%）のスタイルが適用されます。animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます。
- both
- アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用されます。animation-delayプロパティをプロパティを指定している場合再生までの時間は最初のキーフレーム（0%）のスタイルが適用されます。