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
はアニメーション周期の半分を再生します。負の数は無効です。
メモ: animation-*
プロパティにコンマ区切りで複数の値を指定した場合、 animation-name
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
形式文法
<single-animation-iteration-count>#where
<single-animation-iteration-count> = infinite | <number>
例
CSS アニメーションを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations animation-iteration-count の定義 |
草案 | 初回定義 |
初期値 | 1 |
---|---|
適用対象 | すべての要素、::before / ::after 疑似要素 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API