CSS animation-iteration-count プロパティ: アニメーションの繰り返し回数を制御する
このページでは、CSSの`animation-iteration-count`プロパティについて詳しく解説します。このプロパティを使用すると、アニメーションの再生回数を制御し、無限ループも実現できます。詳細な説明、サンプルコード、一般的な使用例などを紹介します。
目次
animation-iteration-count プロパティとは？
`animation-iteration-count`プロパティは、CSSアニメーションが何回ループするかを定義します。値として数値または`infinite`キーワードを受け入れます。
- 数値は、アニメーションのループ回数を表します。
- `infinite`は、アニメーションが無限にループすることを表します。
構文と値
`animation-iteration-count` の構文は次のとおりです。
animation-iteration-count: <number> | infinite;
<number>は正の整数を表します。infiniteは無限ループを表します。
コード例
例1：四角形のアニメーションを3回実行する
<div class="box"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear forwards;
animation-iteration-count: 3;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
例2：無限に回転するアニメーションを作成する
<div class="spinner"></div>
<style>
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(to right, red, yellow);
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
実際の適用例
- 点滅効果の作成: `animation-iteration-count`を無限に設定すると、要素を点滅させるアニメーションを作成できます。これは、通知ランプや通知アイコンなどに使用できます。
- 読み込みアニメーションの制御: `animation-iteration-count`を1に設定すると、読み込みアニメーションを1回だけ再生できます。
- 複雑なアニメーションシーケンスの作成: `animation-delay`と`animation-iteration-count`を組み合わせることで、複雑なアニメーションシーケンスを作成できます。たとえば、テキストを1文字ずつ表示する効果などです。
ブラウザの互換性
`animation-iteration-count`プロパティは、優れたブラウザ互換性を備えており、ほぼすべてのモダンブラウザでサポートされています。
| ブラウザ | バージョン |
|---|---|
| Chrome | 4+ |
| Firefox | 5+ |
| Safari | 4+ |
| Opera | 12+ |
| Internet Explorer | 10+ |
| Edge | 12+ |
より詳細なブラウザ互換性については、Can I use を参照してください。
まとめ
`animation-iteration-count`は、アニメーションのループ回数を簡単に制御できる強力なCSSプロパティです。このプロパティを柔軟に使用することで、さまざまな生き生きとしたアニメーション効果を作成できます。
よくある質問
Q1: animation-iteration-count を小数点以下の値に設定できますか？
いいえ、`animation-iteration-count` は正の整数値または `infinite` キーワードのみを受け付けます。小数点以下の値を設定すると、切り捨てられます。
Q2: animation-iteration-count と animation-delay を一緒に使用するにはどうすればよいですか？
`animation-delay` はアニメーションの開始を遅らせるために使用し、`animation-iteration-count` は繰り返しの回数を制御します。これらのプロパティを組み合わせて、より複雑なアニメーションシーケンスを作成できます。
Q3: 特定の回数だけアニメーションを繰り返した後、アニメーションを停止するにはどうすればよいですか？
特定の回数だけアニメーションを繰り返した後、アニメーションを停止するには、`animation-fill-mode` プロパティを `forwards` に設定します。これにより、アニメーションの最後のフレームが保持されます。