最終更新日 2021年6月22日

animation-directionプロパティ

animation-directionは、アニメーションを逆方向に再生させるプロパティです。

animation-iteration-countで、アニメーションを繰り返し再生させる場合に、繰り返し再生の「奇数カウント、偶数カウント、すべてのカウント」のいずれかで逆方向に再生させます。

逆向き方向へ再生した場合、animation-timing-functionによる効果も通常とは逆になります。

アニメーション関連のプロパティをまとめて指定する場合は、animationを使用します。

CSS3での変更点

・animation-directionは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
normal	すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ	なし

値	説明
normal	アニメーションの繰り返し再生は、すべて通常方向に再生されます。（初期値）
reverse	アニメーションの繰り返し再生は、すべて逆方向に再生されます。
alternate	アニメーションの繰り返し再生は、奇数カウントで通常方向に再生され、偶数カウントで逆方向に再生されます。
alternate-reverse	アニメーションの繰り返し再生は、奇数カウントで逆方向に再生され、偶数カウントで通常方向に再生されます。

サンプルコード

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

参考文献：CSS Animations

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。