animation-iteration-count:アニメーションの繰り返し回数を指定する
初期値 | 1 |
適用対象 | 全ての要素、疑似要素 |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
animation-iteration-countプロパティの説明
animation-iteration-count
は、CSSで作成したアニメーションの繰り返す回数を指定します。アニメーションは、再生を開始してからここで指定した数の分だけ周期を繰り返して停止します。0
または無限、あるいは小数点を含む途中停止も指定できます。
アニメーション関連のプロパティを一括で制御する場合は、animation
を使用して下さい。
animation-iteration-countに指定できる値
- infinite
- アニメーションを無限に繰り返します。各プロパティで定めた周期を一周させた後、開始地点に戻って継続的に再生を行います。
- <number>
- アニメーションを繰り返す回数を数値で指定します。小数点を含む値を指定した場合は、アニメーションの途中で再生を中断して開始地点に戻ります。初期値は
1
です。
animation-iteration-countの使い方とサンプル
animation-iteration-count
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
animation-iteration-count: infinite;
/* <number>値 */
animation-iteration-count: 4;
animation-iteration-count: 12;
animation-iteration-count: 5.6;
/* 複数の値を指定 */
animation-iteration-count: 0, 16, infinite;
/* グローバル値 */
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: unset;
animation-iteration-countの実例
それでは簡単な例を見てみましょう。同じ内容のアニメーションに対して繰り返す回数を変更した場合は、以下のような挙動となります。
CSS
.as_box > div {
margin-top: 10px;
padding: 10px;
width: 50px;
background: #ccc;
text-align: center;
animation-name: as_move;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: normal;
}
@keyframes as_move {
from { margin-left: 0%; } to { margin-left: 90%; }
}
#count_a {
animation-iteration-count: 1;
}
#count_b {
animation-iteration-count: 1.5;
}
#count_c {
animation-iteration-count: 3;
}
#count_d {
animation-iteration-count: infinite;
}
HTML
<div class="as_box">
<div id="count_a">1</div>
<div id="count_b">1.5</div>
<div id="count_c">3</div>
<div id="count_d">∞</div>
</div>
表示確認
animation-iteration-countに関連するCSSプロパティ
アニメーション | |
---|---|
animation | アニメーションに関する指定をまとめて行う |
animation-name | アニメーションの名前を定義する |
animation-duration | アニメーションの再生一回分の時間の長さを指定する |
animation-timing-function | アニメーションの再生タイミングに変化を付ける |
animation-delay | アニメーションが開始するタイミングを指定する |
animation-iteration-count | アニメーションの繰り返し回数を指定する |
animation-direction | アニメーションの再生方向を指定する |
animation-fill-mode | アニメーションが再生されていない時にどのような状態で待機するかを指定する |
animation-play-state | アニメーションを再生させるか一時停止させるか指定する |