animation-iteration-count

CSS の animation-iteration-count プロパティは、停止するまでにアニメーション周期が再生される回数を指定します。

複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の1つが使用されたら最初に戻ります。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利です。

構文

/* キーワード値 */
animation-iteration-count: infinite;

/* <number> 値 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 複数の値 */
animation-iteration-count: 2, 0, infinite;

animation-iteration-count プロパティは1つ以上のコンマで区切られた値で指定します。

値

infinite

アニメーションは無制限に繰り返されます。

<number>

アニメーションが繰り返される回数です。既定値は 1 です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 0.5 はアニメーション周期の半分を再生します。負の数は無効です。

形式文法

<single-animation-iteration-count>#
where 
<single-animation-iteration-count> = infinite | <number>

例

CSS アニメーションを参照してください。

仕様書

ブラウザーの対応

関連情報

• CSS アニメーションの使用
• JavaScript AnimationEvent API