アニメーションの再生中・再生後のスタイルを指定する

animation-fill-mode

{ 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;
}