animation-direction

アニメーションを反転再生、または交互に反転再生させるか指定できます。

『animation-direction』の値を指定しなかった場合は『@keyframes』で設定した『0%』から『100%』のアニメーションを繰り返しますが、『animation-direction』を指定することによってアニメーションを逆方向（100%から0%）にさせたり、奇数回、偶数回によって反転再生させたりすることができます。

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

サンプルコード

div {
	animation-direction: normal;
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-ms-animation-direction: normal;
}

animation-direction　値一覧

値	効果
normal	通常の方向(0%から100%)にアニメーションします。これが初期値です。
alternate	奇数の回数では通常の方向(0%から100%)にアニメーションし、偶数の回数では逆の方向(100%から0%)にアニメーションします。
reverse	逆の方向(100%から0%)にアニメーションします。
alternate-reverse	偶数の回数では通常の方向に(0%から100%)アニメーションし、奇数の回数では逆の方向(100%から0%)にアニメーションします。

ブラウザでの表示結果

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: normal;
	-webkit-animation-direction: normal;
	-moz-animation-direction: normal;
	-ms-animation-direction: normal;
}
@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 infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-ms-animation-direction: alternate;
}
@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 infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: reverse;
	-webkit-animation-direction: reverse;
	-moz-animation-direction: reverse;
	-ms-animation-direction: reverse;
}
@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 infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
				
	animation-direction: alternate-reverse;
	-webkit-animation-direction: alternate-reverse;
	-moz-animation-direction: alternate-reverse;
	-ms-animation-direction: alternate-reverse;
}
@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;}
}

対応ブラウザ

デスクトップ

Chrome

43 以降 ○

42 △

41 △

40 △

39 △

38 △

37 △

36 △

35 △

↑ prefix『-webkit-』が必要

2 以前 ×

Firefox

16 以降 ○

15 △

14 △

13 △

12 △

11 △

10 △

9 △

8 △

↑ prefix『-moz-』が必要

4 以前 ×

Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

↑ prefix『-webkit-』が必要

3 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

30 以降 ○

29 △

28 △

27 △

26 △

25 △

24 △

23 △

22 △

↑ prefix『-webkit-』が必要

29 △

28 △

27 △

26 △

25 △

24 △

23 △

22 △

↑ prefix『-o-』が必要

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

7 △

6 △

5 △

4 △

↑ prefix『-webkit-』が必要

2 以前 ×

Android Browser

43 以降 ○

4.4 △

↑ prefix『-webkit-』が必要

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『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;}
}

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

トップページへ

CSS辞典

animation-direction

サンプルコード

animation-direction 値一覧

ブラウザでの表示結果

対応ブラウザ

animation-direction　値一覧