最終更新日
animation-directionは、アニメーションを逆方向に再生させるプロパティです。
animation-iteration-countで、アニメーションを繰り返し再生させる場合に、繰り返し再生の「奇数カウント、偶数カウント、すべてのカウント」のいずれかで逆方向に再生させます。
逆向き方向へ再生した場合、animation-timing-functionによる効果も通常とは逆になります。
アニメーション関連のプロパティをまとめて指定する場合は、animationを使用します。
初期値 | 適用先 | 継承 |
---|---|---|
normal | すべての要素、::before擬似要素セレクタ、::after擬似要素セレクタ | なし |
値 | 説明 |
---|---|
normal | アニメーションの繰り返し再生は、すべて通常方向に再生されます。(初期値) |
reverse | アニメーションの繰り返し再生は、すべて逆方向に再生されます。 |
alternate | アニメーションの繰り返し再生は、奇数カウントで通常方向に再生され、偶数カウントで逆方向に再生されます。 |
alternate-reverse | アニメーションの繰り返し再生は、奇数カウントで逆方向に再生され、偶数カウントで通常方向に再生されます。 |
animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse;