animation-iteration-count

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

試してみましょう

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

構文

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

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

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

/* グローバル値 */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

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

infinite

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

<number>

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

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。

メモ: CSS スクロール駆動アニメーションを作成するとき、 animation-iteration-count を指定すると、進行タイムラインの進行に伴ってその回数だけアニメーションが繰り返されます。もし animation-iteration-count が指定されなかった場合、アニメーションは一度しか発生しません。 infinite はスクロール駆動のアニメーションには有効な値ですが、アニメーションはうまく動作しません。

公式定義

初期値1
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

animation-iteration-count = 
<single-animation-iteration-count>#

<single-animation-iteration-count> =
infinite |
<number [0,∞]>

繰り返し回数を設定

10 回実行されるアニメーション

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

結果

矩形にポインターを当てるとアニメーションが始まります。

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

仕様書

Specification
CSS Animations Level 1
# animation-iteration-count

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-iteration-count
infinite

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報