HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。
構文（Syntax）
animationIterationCount プロパティの基本的な構文は以下の通りです。
■ animationIterationCount プロパティを設定する場合：
object.style.animationIterationCount = "number|infinite|initial|inherit";
指定できる値（Values）
animationIterationCount プロパティには、以下の4つの値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | number アニメーションを再生する回数を示す数値です。デフォルト値は「1」に設定されており、アニメーションは1回だけ再生されます。 |
| 2 | infinite アニメーションを無限に繰り返し再生します。ページが表示されている間、アニメーションが永続的にループします。 |
| 3 | initial このプロパティを初期値（デフォルト値）に戻します。 |
| 4 | inherit 親要素からプロパティの値を継承します。 |
使用例（Example）
ここでは、animationIterationCount プロパティを使用した具体的な例を見ていきましょう。ボタンをクリックすると、アニメーションの再生回数が「1」から「5」に変更されるサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: black;
animation: shrink 3s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
@keyframes shrink {
0% {
color: white;
letter-spacing: 1.8em;
}
100% {
color: magenta;
letter-spacing: 0.01em;
}
}
</style>
<script>
function IncreaseIteration(){
document.getElementById("PARA1").style.animationIterationCount = 5;
document.getElementById("Sample").innerHTML = "アニメーションの再生回数が5になりました";
}
</script>
</head>
<body>
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>下のボタンをクリックすると、上記アニメーションの再生回数が変更されます</p>
<button onclick="IncreaseIteration()">INCREASE COUNT</button>
<p id="Sample"></p>
</body>
</html>
このサンプルでは、段落要素に対して文字色と字間（letter-spacing）が変化する「shrink」というキーフレームアニメーションを定義しています。初期状態では animation-iteration-count: 1; によりアニメーションは1回だけ再生されます。
実行結果（Output）
上記のコードを実行すると、次のような画面が表示されます。
「INCREASE COUNT」ボタンをクリックすると、JavaScript の IncreaseIteration() 関数が呼び出され、対象の段落要素のアニメーション再生回数が「5」に設定されます。同時に、サンプル用の段落には「アニメーションの再生回数が5になりました」というメッセージが表示されます。
このように、animationIterationCount プロパティを活用すれば、ユーザーの操作に応じてアニメーションの繰り返し回数を動的に変更することが可能です。
-
HTML DOM スタイル animationPlayState プロパティの使い方を解説
animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ
-
HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init