CSSリファレンス

animation-directionの意味と使い方

アニメーションを繰り返すように設定した場合に、折り返して逆向きに実行(逆再生)するかどうかを指定するプロパティです。
複数のアニメーションを実行方向を変えて適用する場合は、それぞれに対応する実行方法を「,」で区切って記述します。

値の指定方法

normal

通常の実行方法でアニメーションを繰り返します。


reverse

通常の実行方法とは逆向きに実行しながらアニメーションを繰り返します。


alternate

奇数回目は通常通りに実行し、偶数回目は逆向きに実行しながらアニメーションを繰り返します。逆向きに実行するときは、animation-timing-functionプロパティによる動作も逆になります。例えば「ease-in」が指定されているアニメーションは「ease-out」で実行されます。


alternate-reverse

奇数回目は逆向きに実行し、偶数回目は通常通りに実行しながらanimation-timing-functionプロパティによる動作も逆になります。例えば「ease-in」が指定されているアニメーションは「ease-out」で実行されます。


関連プロパティ

  • animation-duration:アニメーションを実行する時間を指定する
  • animation-play-state:アニメーションの実行・一時停止を指定する
  • animation-delay:アニメーションを遅れて開始されたい