CSS3：animation-directionプロパティ

名前	`animation-direction`
値	<single-animation-direction>#
初期値	normal
適用対象	すべての要素
継承	されない
百分率	受容しない
算出値	リスト：各アイテムは指定されたキーワードを与える
正準的順序	文法に従う
アニメーション型	アニメート不可

animation-direction プロパティは、アニメーションをどの周回において逆再生させるかを定義する。アニメーションが逆再生されるときは計時関数も逆にされる。例えば、逆再生されたときの ease-in アニメーション【 animation-timing-function の値が ease-in にされたアニメーション】は、ease-out アニメーションとして現れることになる。

<single-animation-direction>

＝normal | reverse | alternate | alternate-reverse

normal

アニメーションのすべての反復は、指定どおりに（順方向に）再生される。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-direction:normal;
 "></DIV>
</DIV>

reverse

アニメーションのすべての反復は、指定とは逆方向に再生される

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-direction:reverse;
 "></DIV>
</DIV>

alternate

アニメーションの各周回のうち、奇数回目の反復は順方向に再生され、偶数回目の反復は逆方向に再生される。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-direction:alternate;
 "></DIV>
</DIV>

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-direction:alternate;
  animation-iteration-count:2;
 "></DIV>
</DIV>

alternate-reverse

アニメーションの各周回のうち，奇数回目の反復は逆方向に再生され、偶数回目の反復は順方向に再生される。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-direction:alternate-reverse;
  animation-iteration-count:2;
 "></DIV>
</DIV>

注記：反復の偶奇を決定する目的においては、回数は 1 から数えることに注意。

スクリプト：

スクリプト：

CSS3

プロパティ

animation-direction

テスト