最終更新日

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外部リンク
HOME