プロパティ animation-direction

プロパティ animation-direction は、アニメーションの再生方向を指定します。デフォルトでは、アニメーションは 1 回のみ繰り返され、その後最初の状態に戻り、もし遅延 animation-delay が設定されていれば、指定された時間待機してからサイクルが最初から開始されます。

このプロパティを使用すると、この動作を変更できます。例えば、アニメーション終了後に最初の位置にジャンプせず、終了した場所に留まるように設定することができます。

また、アニメーションが極点に達した後に元に戻る動作（transition のように）を設定することも可能です。以下の説明を参照してください。

構文

セレクター {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

値

値	説明
`reverse`	アニメーションが逆方向に再生されます。
`alternate`	アニメーションが順方向、次に逆方向に交互に再生されます（transition と同様）。
`alternate-reverse`	アニメーションが終了位置から開始位置へ、そしてその逆へと再生されます。本質的には、`alternate` と `reverse` の値を組み合わせたものです。
`normal`	アニメーションは開始から終了まで再生され、終了後にジャンプして最初の位置に戻ります。

デフォルト値: normal。

例

ここでは、値 alternate が設定されているため、要素は一方に移動した後、元の位置に戻ります。animation-duration は 3 秒に設定されており、これは「往き」と「戻り」の移動がそれぞれ 3 秒間続くことを意味します：

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

例

ここでは、要素が逆方向に移動します（左から右ではなく、右から左へ）：

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

例

ここでは、要素が前後に移動しますが、逆方向から開始します（左から開始する代わりに右から開始します）：

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

プロパティ animation-direction

構文

値

例

例

例

関連項目