備忘録的プログラミングリファレンス

animation-fill-mode プロパティ

 animation-fill-mode プロパティは、CSS アニメーションの実行時間外の動作、スタイルを指定するプロパティです。
 CSS animation は実行の前後ではエフェクトはかかりません。animation-fill-mode プロパティによってCSS animationの前後にエフェクトをかけることができます。
 実行時間外は実行前,実行後、または両方を指定することができます。

animation-fill-mode プロパティ
div:hover{
	animation: exampleAnime 1s;
	animation-delay: 1s;
	animation-fill-mode: both;
}

@keyframes mymove {
	from {
		box-shadow: 3px 3px;
	}
	to {
		box-shadow: 10px 10px;
	}
}
詳しくはExampleを参照してください

 上記の例において、animation-fill-mode プロパティが影響するのは

from {
	box-shadow: 3px 3px;
}
の部分です。div エレメント上にポインターがあると、box-shadow: 3px 3px;の設定が CSS アニメーションが始まる前から表示されます。

ページ内 Index

構文(Syntax)

CSS

animation-fill-mode:[ none | forwards | backwards | both | initial | inherit ];

DOM ( JavaScript )

値の取得
object.style.animationFillMode
値の設定
object.style.animationFillMode="[ none | forwards | backwards | both | initial | inherit ]"

値(Values)

Value摘要
none初期値(default値)
backwards最初のキーフレーム状態を実行前から表示。
forwards最後のキーフレーム状態を実行後も保持。
both実行前と実行後にエフェクトがかかる
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)no

Example

 animation-fill-mode プロパティの例です。

 以下の例において、animation-fill-mode プロパティが機能するのは

from {
	box-shadow: 3px 3px;
}
の部分です。div エレメント上にポインターがあると、このbox-shadow: 3px 3px;が CSS アニメーションが始まる前から表示されます。