Title

animation-fill-modeとは

ここで説明するanimation-fill-mode とは次の語句からなるCSSのプロパティです。

animation

読み: アニメーション
意味: 動画、アニメーション

fill

読み: フィル
意味: 満たす、充満

mode

読み: モード
意味: 方法、形態

目次に戻る

animation-fill-modeプロパティの概要

このプロパティはアニメーション再生の前後のスタイルを指定することができます。

具体的にはアニメーションの開始前の設定である animation-delay が実行されている時点と、アニメーションが終了した時点に @keyframes の0%(from)のフレームを使用するのか、100%(to)のフレームを使用するかを指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{animation-fill-mode: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このサンプルでは、 @keyframes で定義したアニメーションパターンを animation-name プロパティでdiv要素に適用しています。 また animation-duration プロパティで再生時間を2sとし、 animation-delay プロパティで1s待機してからアニメーションが開始するように指定しています。

初期値: none

初期値のnoneキワードは、このスタイルは適用されません。アニメーションが再生が終わると最初のキーフレームにもどります。

最初のキーフレームとは、0%もしくはfromのことです。

div{animation-fill-mode: none;}

目次に戻る

キーワード値: forwards

forwardsキワードは、アニメーションが終了した時点で、アニメーションの終了フレームを維持します。

animation-direction と animation-iteration-count で指定した値により終了フレームは変わります。

animation-directionがnormalだとアニメーションは @keyframes の0%から100%に向かって再生され、アニメーション終了時に100%のスタイルを維持します。 animation-directionがreverseならば@keyframesの100%から0%に向かって再生され、アニメーション終了時に0%のスタイルを維持します。

div{
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	animation-direction: normal;
	animation-name: myLeft;
}
@keyframes myLeft{
		0% {left: 0;}
		100%{left: 490px;}
}

このサンプルは、animation-directionの指定のみで解説しましたが、animation-iteration-countの値によっても変わるので詳細は下記の一覧を参照してください。

目次に戻る

キーワード値: backwards

backwardsキワードは、アニメーションが始まるまでの間は、アニメーションの開始フレームを維持します。

つまり、animation-delayが実行されている間は、animation-directionで指定した開始フレームを維持するということです。

div{
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: backwards;
	animation-direction: normal;
	animation-name: myLeft;
}
@keyframes myLeft{
		0% {left: 0;}
		100%{left: 490px;}
}

目次に戻る

キーワード値: both

bothキワードは、forwardsとbackwardsの両方の既定に従います。

forwardsキワードは、アニメーションが終了した時点でアニメーションの終了フレームを維持します。 backwardsキワードは、アニメーションが始まるまでの間はアニメーションの開始フレームを維持します。

つまり、アニメーションの開始前には開始フレームを維持し、アニメーション終了後は終了フレームを維持するということです。

具体的に説明すると アニメーション開始前にあたる animation-delay で指定した待ち時間は、 animation-direction がnormalの場合は、 @keyframes の0%(from)のスタイルを維持し、 animation-directionがreverseの場合は、@keyframesの100%(to)のスタイルを維持します。
アニメーション終了後は、 animation-directionがnormalの場合は、@keyframesの100%(to)のスタイルを維持し、 animation-directionがreverseの場合は、@keyframesの0%(from)のスタイルを維持します。

div{
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: both;
	animation-direction: normal;
	animation-name: myLeft;
}
@keyframes myLeft{
		0% {left: 0;}
		100%{left: 490px;}
}

目次に戻る

グローバル値

animation-fill-modeプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnoneに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{animation-fill-mode: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る