{ animation-fill-mode 【 アニメーション・フィル・モード 】 : スタイル; }

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%）のスタイルが適用されます。

サンプルコード

以下の例は、対象要素の背景色を変化させるアニメーションです。animation-fill-modeプロパティの値にbothを指定しているため、animation-delayプロパティで指定した5秒間は、最初のキーフレームで指定した赤い背景色になります。また、アニメーションの完了後は、最後のキーフレームで指定した青い背景色になります。

@keyframes bnr-animation{
  0% {background-color: red; }
  50% {background-color: green; }
  100% {background-color: blue; }
}
.box{
  background-color: yellow;
  animation-name: box-animation;
  animation-delay: 5s;
  animation-fill-mode: both;
}