プログラミング

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

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

{animation-direction: 再生方向;}

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

animation-directionの値の指定方法

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

normal

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

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

alternate-reverse

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

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

関連記事
animation-iteration-countでアニメーションの実行回数を指定【CSS】

Leave a Comment