animation-fill-mode：アニメーションが再生されていない時にどのような状態で待機するかを指定する

animation-fill-modeプロパティの説明

animation-fill-modeは、CSSで作成したアニメーションの再生開始前や再生終了後の「アニメーションが再生されていない時」にどのような状態で待機するかを指定します。この値には、あらかじめ用意されたキーワードが入ります。

アニメーション関連のプロパティを一括で制御する場合は、animationを使用して下さい。

animation-fill-modeに指定できる値

none

アニメーションが再生されていない時は、それに関するスタイルを適用しません。要素はアニメーション以外のスタイルを反映させた状態で表示されます。これが初期値です。

forwards

アニメーションは、再生した後に最後のキーフレームの状態を保持します。最後のキーフレームは、animation-directionとanimation-iteration-countの値によって変わります。

backwards

アニメーションは、animation-directionの値に従い最初のキーフレームとして相応しいものを適用し、animation-delayで指定された時間これを保持します。

both

アニメーションは、forwardsとbackwardsの両方の指定に従います。これにより、最初と最後の待機状態を制御します。

animation-directionの使い方とサンプル

animation-directionプロパティの構文は以下の通りです。

/* キーワード値 */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* 複数の値を指定 */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

/* グローバル値 */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: unset;

animation-fill-modeの実例

それでは簡単な例を見てみましょう。同じ内容のアニメーションに対して別の待機状態を指定した場合は、以下のような挙動となります。

.samp_box > div {
	margin-top: 10px;
	width: 9em;
	background: #ccc;
	text-align: center;
	animation-name: as_move;
	animation-duration: 5s;
	animation-timing-function: steps(5);
	animation-delay: 2s;
	animation-iteration-count: 1;
}
@keyframes as_move {
	0% { margin-left: 0%;}
	100% { margin-left: 80%;}
}
#afm_1 {
	animation-fill-mode: none;
}
#afm_2 {
	animation-fill-mode: forwards;
}
#afm_3 {
	animation-fill-mode: backwards;
}
#afm_4 {
	animation-fill-mode: both;
}

<div class="samp_box">
	<div id="afm_1">none</div>
	<div id="afm_2">forwards</div>
	<div id="afm_3">backwards</div>
	<div id="afm_4">both</div>
</div>