CSS

Used to specify whether an animation plays forwards, backwards, or alternates between the two.

animation-direction

　animation-directionプロパティは、アニメーションがどのように動くかを制御するためのものです。この設定を変えることで、アニメーションが前に進むのか、後ろに戻るのか、またはその両方を繰り返すのかを決められます。

normal: アニメーションは始めから終わりにかけて、一方向に進みます。例えば、画面の左から右へ移動するアニメーションは、常に左から右へと進みます。
reverse: 「normal」とは逆に、アニメーションは終わりから始めにかけて、逆方向に進みます。左から右への移動を設定した場合、実際には右から左へ動きます。
alternate: アニメーションは交互に方向を変えながら進みます。最初は「normal」と同じく始めから終わりに進み、次に「reverse」と同じく終わりから始めに戻ります。この繰り返しで、動きが生まれます。
alternate-reverse: 「alternate」と似ていますが、始める方向が逆です。最初に「reverse」の動きをし、次に「normal」の動きをします。つまり、最初は後ろに進み、次に前に進むという順番で繰り返します。

　アニメーションが逆再生される最中には、 animation-timing-function プロパティで指定されたタイミング・進行割合も逆方向になります。例えば、animation-timing-function プロパティの値に ease-in（ゆっくり始まる）が指定されたアニメーションが逆再生される最中には、 ease-out（ゆっくり終わる）が指定されたようになります。

　これらの設定を使って、アニメーションに様々な動きをつけることができます。たとえば、ウェブページ上でボタンが浮かび上がるような動きや、画像がスライドして表示されるようなエフェクトを作ることが可能です。animation-directionを上手く使うと、ウェブサイトをより魅力的で動きのあるものにできるので、いろいろ試してみるのがおすすめです。

Sample

　ここでは、四角形が水平に移動するアニメーションを例に取ります。このアニメーションを通じて、各 animation-direction 設定の違いを視覚的に理解することができます。

Normal

Reverse

Alternate

Alternate-Reverse

HTML

<div class="box" id="normal">Normal</div>
<div class="box" id="reverse">Reverse</div>
<div class="box" id="alternate">Alternate</div>
<div class="box" id="alternate-reverse">Alternate-Reverse</div>

　ここでは、共通のアニメーションキーフレームを定義し、それを各 div に適用することで、animation-direction の違いを示します。

CSS

/* 共通スタイル */
.box {
	width: 100px;
	height: 100px;
	margin: 20px;
	background-color: skyblue;
	position: relative;
	animation: slide 4s infinite;
}

/* アニメーションキーフレームの定義 */
@keyframes slide {
	from { left: 0; }
	to { left: calc(100% - 110px); }
}

/* 各アニメーション設定の適用 */
#normal {
	animation-direction: normal;
}

#reverse {
	animation-direction: reverse;
}

#alternate {
	animation-direction: alternate;
}

#alternate-reverse {
	animation-direction: alternate-reverse;
}

　このコードでは、slide というアニメーションキーフレームを作成し、それを .box クラスに適用しています。そして、#normal、#reverse、#alternate、#alternate-reverse 各IDに対して、animation-direction を異なる値に設定しています。これにより、同じ移動アニメーションが異なる方向設定でどのように見えるかを確認できます。アニメーションは無限に繰り返されるので、各設定の違いをじっくりと観察することができます。