animation-iteration-count プロパティ

プロパティ animation-iteration-count は、アニメーションの繰り返し回数を指定します。デフォルトでは、アニメーションは 1 回だけ再生され、その後、初期状態に戻ります。しかし、このプロパティを使用すると、特定の回数や無限の繰り返しを設定できます。

構文

セレクター {
	animation-iteration-count: 整数または小数 | infinite;
}

値

値	説明
数値	アニメーションが停止するまでの繰り返し回数を指定します。停止時の位置は、プロパティ `animation-fill-mode` で制御されます。小数値を指定することも可能で、その場合はアニメーションは一部のみ再生されます。
`infinite`	アニメーションが無限に繰り返されます。

デフォルト値: 1。

例 . 有限の繰り返し回数

この例では、アニメーションは 3 回だけ繰り返され、その後、初期状態に戻ります。

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 3;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

例 . infinite 値

今回は、アニメーションが無限に繰り返されます。

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

animation-iteration-count プロパティ

構文

値

例 . 有限の繰り返し回数

例 . infinite 値

関連項目