過去バージョン

animation-iteration-count とは

animation-iteration-count は、CSS の @keyframes アニメーションを何回繰り返すかを指定するプロパティです。値を infinite にすると永続ループ、整数なら指定回数で停止します。

基本構文

.spinner {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;   /* 無限ループ */
  animation-timing-function: linear;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

取れる値

注： 負の値は無効。小数を指定するとキーフレームの途中で停止するため、終端と途中の見た目が違うと中途半端な状態で固まる点に注意。

複数アニメーションに個別指定

カンマ区切りで複数のアニメーションを動かす際は、animation-iteration-count もカンマ区切りで個別指定できます。

.combo {
  animation-name:            rotate, fade;
  animation-duration:        2s,     1s;
  animation-iteration-count: infinite, 3;   /* rotate=無限 / fade=3回 */
}

animation ショートハンドでの記述

/* duration / timing / delay / iteration-count / direction / fill-mode / play-state / name */
.spinner {
  animation: 1s linear 0s infinite normal none running rotate;
}

/* 必要最小限の書き方 */
.spinner-min {
  animation: rotate 1s linear infinite;
}

関連プロパティ

典型例：ローディングスピナー

.loader {
  width: 32px; height: 32px;
  border: 4px solid #eee;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

典型例：3 回だけバウンドして停止

.bounce {
  animation: bounce 0.5s ease-in-out 3 alternate forwards;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}

3 alternate で上下を 3 回、forwards で最終位置に固定。

animation-direction との組み合わせ

繰り返し回数は animation-direction と組み合わせると挙動が大きく変わります。同じキーフレームでも「1 往復で 2 回」とカウントされる点に注意してください。

animation-fill-mode との関係

有限の繰り返し回数を指定すると、アニメーション終了後の状態が問題になります。デフォルトでは開始前の状態に戻りますが、animation-fill-mode: forwards を指定すれば最終フレームの状態を保持できます。ローディングが完了して結果に切り替わるような UI では forwards がほぼ必須です。

アクセシビリティ：prefers-reduced-motion

無限ループのアニメーションは、めまいや前庭障害のあるユーザーに負担になります。OS の「視差効果を減らす」設定を尊重して、必要な場合だけアニメーションを止めましょう。

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-iteration-count: 1;  /* 1 回で止める */
  }
}

JavaScript で動的に変更

const el = document.querySelector('.spinner');

// 一時停止
el.style.animationPlayState = 'paused';

// 繰り返し回数を動的に変更
el.style.animationIterationCount = 'infinite';

// アニメーション終了イベント（infinite では発火しない）
el.addEventListener('animationend', () => console.log('done'));

まとめ

1. animation-iteration-count はアニメーションの繰り返し回数
2. 値は整数 / infinite / 小数。初期値は 1
3. カンマ区切りで複数アニメーションに個別指定
4. ショートハンド animation にも含められる
5. アクセシビリティ配慮で prefers-reduced-motion を尊重

関連

• @keyframes — アニメーションのフレーム定義
• animation-duration プロパティ — 1 周期の長さ
• animation-timing-function プロパティ — イージング
• animation-direction プロパティ — 再生方向
• animation ショートハンド — 一括指定