【CSS Modules】animation-iteration-countプロパティの使い方

animation-iteration-countプロパティは、CSSアニメーションが繰り返される回数を指定するプロパティです。このプロパティを使用することで、ウェブページ上の要素に適用されたアニメーションが、どれだけ再生されるかを正確に制御できます。

指定できる値には、正の数値とキーワードがあります。正の数値を設定した場合、アニメーションはその数値の回数だけ繰り返されて停止します。例えば、「3」と指定すれば、アニメーションは3回再生されます。一方、キーワード「infinite」を指定すると、アニメーションは停止することなく、無限に繰り返し再生され続けます。

このプロパティの初期値は「1」です。そのため、animation-iteration-count を明示的に指定しない場合、アニメーションは一度だけ実行されて終了します。

animation-iteration-count は、animation-duration（アニメーションの再生時間）や animation-timing-function（アニメーションの再生速度の変化）など、他のアニメーション関連プロパティと組み合わせて使用されます。また、animation というショートハンドプロパティの一部として、これら複数のプロパティの値を一括で設定することも可能です。

このプロパティを適切に活用することで、単調な一度きりの動きだけでなく、ループする背景アニメーションや、特定の回数だけ実行されるハイライト演出など、より多様で表現豊かなアニメーションをウェブコンテンツに組み込むことができます。これにより、ユーザーインターフェースの動的な側面を強化し、より魅力的なユーザー体験を提供するために重要な役割を果たします。

Copy
1.element {
2  animation-iteration-count: 3;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません