CSS3

プロパティ

animation-iteration-count

→● mdn

アニメーションが再生される周回数。

animation-iteration-count プロパティは、アニメーションが再生される周回 数 ― 反復回数 ― を指定する。初期値 1 は、アニメーションがその開始から終止までの間、1 回だけ再生されることを意味する。このプロパティは、animation-direction に対する値 alternate と併用されることも多い ― それは、交替周回においてアニメーションを逆再生させることになる。

アニメーションが作動中の時区間（所要時間 × 反復回数）は、作動時間 と呼ばれる。

以下のCSSが組み込んであります：

<single-animation-iteration-count>

＝infinite | <number>

infinite

アニメーションは、永遠に繰り返されることになる。

<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:2s;
  animation-iteration-count:infinite;
 "></DIV>
</DIV>

<number> ○

アニメーションは、指定された回数だけ繰り返されることになる。数値が整数でない場合、アニメーションは最後の周回の中途で終止することになる。負な数は妥当でない。

値 0 は妥当であり、animation-duration に対する値 0s と同様に、アニメーションを瞬時に終わらせる。

所要時間 0s のアニメーションは、animation-iteration-count に対する妥当な値が何であれ ― infinite であっても ― 瞬時に生じて終わる。

<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:2s;
  animation-iteration-count:1.5;
 "></DIV>
</DIV>

テスト