この記事の要点

animation-iteration-count は CSS アニメーションの繰り返し回数を指定するプロパティ 値は整数（1 / 3 など）か infinite（無限ループ）、小数（途中で停止）も可 カンマ区切りで複数アニメーションに個別の回数を割り当てられる 初期値は 1（1 回だけ実行して停止） animation ショートハンドにも書ける。アニメーション全停止には animation-play-state: paused を使う

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); }
}

取れる値

値	意味
1（初期値）	1 回だけ実行して停止
3	3 回繰り返して停止
infinite	無限ループ
2.5	2 回 + 半分で停止（途中停止）
0	実行されない
inherit / initial / unset	CSS 共通キーワード

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

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

カンマ区切りで複数のアニメーションを動かす際は、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;
}

関連プロパティ

プロパティ	役割
animation-name	@keyframes 名
animation-duration	1 周期の時間
animation-delay	開始遅延
animation-timing-function	イージング（ease / linear / cubic-bezier(...)）
animation-direction	方向（normal / reverse / alternate）
animation-fill-mode	終了後の状態（forwards / backwards）
animation-play-state	running / paused

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

.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 回」とカウントされる点に注意してください。

direction	count=2 の挙動
normal（既定）	0→100% を 2 回
reverse	100→0% を 2 回
alternate	0→100% → 100→0%（1 往復で完了）
alternate-reverse	100→0% → 0→100%（1 往復で完了）

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 ショートハンド — 一括指定