プロパティ
animation-fill-mode
CSSアニメーションの実行の前後に、スタイルをどうするか
設定値
- none
- forwards
- backwards
- both
挙動
●下記のように指定したとき
animation-delay: 3s; animation-duration: 3s; animation-fill-mode: {value}
| value | 開始待ち(delay)の間 | アニメ終了後 |
|---|---|---|
| none | @keyframeのスタイルは適用されない | @keyframeのスタイルは適用されない |
| forward | @keyframeのスタイルは適用されない | @keyframe 100%のスタイル保持 |
| backward | @keyframe 0%のスタイルが適用される | @keyframeのスタイルは適用されない |
| both | @keyframe 0%のスタイルが適用される | @keyframe 100%のスタイル保持 |
※delay…アニメ開始待ち時間
※duration…アニメ実行時間
