CSSリファレンス
animation-directionの意味と使い方
アニメーションを繰り返すように設定した場合に、折り返して逆向きに実行(逆再生)するかどうかを指定するプロパティです。
複数のアニメーションを実行方向を変えて適用する場合は、それぞれに対応する実行方法を「,」で区切って記述します。
値の指定方法
normal
通常の実行方法でアニメーションを繰り返します。
reverse
通常の実行方法とは逆向きに実行しながらアニメーションを繰り返します。
alternate
奇数回目は通常通りに実行し、偶数回目は逆向きに実行しながらアニメーションを繰り返します。逆向きに実行するときは、animation-timing-functionプロパティによる動作も逆になります。例えば「ease-in」が指定されているアニメーションは「ease-out」で実行されます。
alternate-reverse
奇数回目は逆向きに実行し、偶数回目は通常通りに実行しながらanimation-timing-functionプロパティによる動作も逆になります。例えば「ease-in」が指定されているアニメーションは「ease-out」で実行されます。