{ animation-direction 【 アニメーション・ディレクション 】 : 再生方向; }

animation-directionプロパティは、アニメーションのサイクルごとの再生方向を指定します。なお、逆方向に再生した場合は、animation-timing-functionプロパティの値も逆の動きをとり、例えば、ease-inを指定しているとease-outの動きとして表現されます。

初期値	normal
継承	なし
適用される要素	すべての要素、:before、:after疑似要素
モジュール	CSS Animations Module Level 3

値の指定方法

再生方向

normal	アニメーションは標準の方向で再生されます。
reverse	アニメーションは逆方向で再生されます。
alternate	アニメーションの繰り返し回数が奇数の場合は標準の方向、偶数の場合は逆方向で再生されます。
alternate-reverse	アニメーションの繰り返し回数が奇数の場合は逆方向、偶数の場合は標準の方向で実行されます。

サンプルコード

以下の例では、animation-iteration-countプロパティの値をinfiniteに指定しているため、アニメーションは制限なく再生されます。その上でanimation-directionプロパティの値をalternate-reverseを指定しているため、再生回数が奇数回の場合は逆方向、偶数回の場合は標準の方向でアニメーションが再生されます。

.box{
  background-color: yellow;
  animation-name: box-animation;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}