Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

animation-fill-mode

『animation』の開始前と終了後をどのような状態にするのか指定できます。アニメーション開始前とは『animation-delay』でアニメーション開始が待たされている間の事を指しますのでご注意下さい。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード

div {
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
}

指定可能な値一覧

値	効果
none	アニメーションで指定されたスタイルをアニメーションの開始前と終了後に適用しません。これが初期値です。
forwards	アニメーション終了の状態がそのまま維持されます。通常だと『100%』、または『to』で指定しているスタイルになります。 ※『animation-direction』で逆再生している場合は『0%』、または『from』で指定しているスタイルになります。
backwards	アニメーション再生前の状態がアニメーションで指定した最初の値になります。通常だと『0%』、または『from』で指定しているスタイルになります。 ※『animation-direction』で逆再生している場合は『100%』、または『to』で指定しているスタイルになります。
both	『forwards』と『backwards』を両方指定した状態になります。

ブラウザでの表示結果

以下のサンプルはアニメーション回数を3回に指定しています。動作確認をする場合はブラウザを更新して下さい。

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3;
	-webkit-animation: hogeanime1 3s 3;
	-moz-animation: hogeanime1 3s 3;
	-ms-animation: hogeanime1 3s 3;
	
	animation-fill-mode: none;
	-webkit-animation-fill-mode: none;
	-moz-animation-fill-mode: none;
	-ms-animation-fill-mode: none;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3;
	-webkit-animation: hogeanime1 3s 3;
	-moz-animation: hogeanime1 3s 3;
	-ms-animation: hogeanime1 3s 3;
	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 300px;
	animation: hogeanime1 3s 2s 3;
	-webkit-animation: hogeanime1 3s 2s 3;
	-moz-animation: hogeanime1 3s 2s 3;
	-ms-animation: hogeanime1 3s 2s 3;

	animation-fill-mode: backwards;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	-ms-animation-fill-mode: backwards;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

div {
	background: #f00;
	width: 300px;
	animation: hogeanime1 3s 2s 3;
	-webkit-animation: hogeanime1 3s 2s 3;
	-moz-animation: hogeanime1 3s 2s 3;
	-ms-animation: hogeanime1 3s 2s 3;

	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

『animation』プロパティを使用する際は『animation』の記述とは別に『@keyframes』も指定しなくてはなりませんのでご注意下さい。

『@keyframes』の記述方法は『@keyframes』という記述の後に任意の『アニメーション名』書き、その後に『{}』で囲い、その中で進行状態に合わせたプロパティの変化を『0%』から『100%』の間で記述します。進行状態は『0%』が開始時、『100%』が終了時です。『0%』は『from』、『100％』は『to』という単語で記述することもできますが、『%』で指定するのが一般的です。

/* 以下のように『{}』で囲い、その中で変化のタイミングと状態を指定します。 */
@keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ