animation-directionでアニメーションの再生方向を指定【CSS】

animation-directionプロパティは、アニメーションが再生される方向を指定するプロパティです。

{animation-direction: 再生方向;}

逆方向に再生した場合は、animation-timing-functionプロパティの値も逆の動きになります。

animation-directionの値の指定方法

animation-directionプロパティでは、以下のような値を指定できます。

normalを指定すると、アニメーションは標準の方向で再生されます。

.animation-ex {
　animation-name: ex-animation;
　animation-direction: normal;
}

@keyframes ex-animation {
　0%{width: 50px;height: 70px;}
　100px{width: 200px;height: 70px;}
}

上の赤いボックスは、幅50pxから200pxまで変化します。

reverseを指定すると、アニメーションは逆方向で再生されます。

.animation-ex {
　animation-name: ex-animation;
　animation-direction: reverse;
}

@keyframes ex-animation {
　0%{width: 50px;height: 70px;}
　100px{width: 200px;height: 70px;}
}

上の赤いボックスはアニメーションの方向を反対に指定しているので、幅が200pxから50pxに変化します。

alternateを指定すると、アニメーションの繰り返し回数が奇数の場合は標準の方向、偶数の場合は逆方向で再生されます。

alternate-reverseを指定すると、alternateと反対で、アニメーションの繰り返し回数が奇数の場合は逆方向、偶数の場合は標準の方向で実行されます。

アニメーションの繰り返し回数は、animation-iteration-countプロパティで指定できます。