CSS3

プロパティ

animation-fill-mode

→● mdn

アニメーション実行の前後に適用されるスタイル設定モード。

animation-fill-mode プロパティは、アニメーション実行の時間外に適用される値を定義する。既定（初期値 none）では、アニメーションは、次に挙げる期間においては、プロパティ値には影響しない：

• それが適用された時点（要素 上に animation-name プロパティが設定された時点）から実際に実行される時点（ animation-delay プロパティにより決定される）までの間
• アニメーションが終止した時点（ animation-duration、animation-iteration-count プロパティにより決定される）より後

animation-fill-mode プロパティにより、このふるまいを上書きできる。また、このプロパティが動的に更新されたときは、アニメーションの遅延の段階／終止した後、いずれの間かに従って、必要に応じて【アニメーションが適用される】各プロパティ値にも反映されることになる。

以下のCSSが組み込んであります：

<single-animation-fill-mode>

＝none | forwards | backwards | both

none

アニメーションは、適用されていても、実行されていない間の効果はない。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-fill-mode:none;
 "></DIV>
</DIV>

forwards

アニメーションは、終止した時点（その animation-iteration-count により決定される）のプロパティ値を、その後にも引き続き適用することになる。animation-iteration-count が正な整数の場合、アニメーションが最後の反復を完了した時点の値が適用されることになる（次の反復の開始時の値ではなく）。animation-iteration-count が 0 の場合、最初の反復の開始時の値が適用されることになる（ animation-fill-mode が backwards のときと丁度同じになる）。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-fill-mode:forwards;
 "></DIV>
</DIV>

backwards

アニメーションは、animation-delay により定義される遅延期間の間、［アニメーションの最初の反復を開始させる keyframe ］内で定義された一連のプロパティ値を適用することになる。この keyframe は、animation-direction 値に応じて、次のいずれかになる：

⮡ normal
⮡ alternate

from（0%）keyframe

⮡ reverse
⮡ alternate-reverse

to（100%）keyframe

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-delay:3s;
  animation-duration:5s;
  animation-fill-mode:backwards;
 "></DIV>
</DIV>

both

forwards、backwards 両効果とも適用される。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-delay:3s;
  animation-duration:5s;
  animation-fill-mode:both;
 "></DIV>
</DIV>

テスト