animation-iteration-countとは
- ここで説明するanimation-iteration-count とは次の語句からなるCSSのプロパティです。
- animation
- 読み: アニメーション
意味: 動画、アニメーション - iteration
- 読み: イテレーション
意味: 繰り返し、反復 - count
- 読み: カウント
意味: 数える
animation-iteration-countプロパティの概要
このプロパティはアニメーションを再生する回数の指定をします。
つまり、要素にアニメーションをさせる場合に @keyframes の0%(from)から100%(to)のアニメーションを1回分として、 それを何回再生させるか指定するということです。
要素にアニメーション効果を付けて実行するためには、要素に対して、最低でも animation-name プロパティで @keyframes 名を指定し、 なおかつ animation-duration プロパティで1回のアニメーションを実行する所要時間を指定しなければいけません。
構文
サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。
セレクター{animation-iteration-count: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
このプロパティはアニメーション一周期の再生回数を指定することができます。 サンプルでは、 @keyframes で定義したアニメーションパターンを animation-name プロパティでdiv要素に適用しています。 animation-duration プロパティで一回のアニメーションの周期を2秒間で再生するように指定しています。
初期値: 1
初期値は1です。 アニメーションは一回再生されます。
div{animation-iteration-count: 1;}数値: 整数で繰り返し回数を指定する
整数値でアニメーションの繰り返し回数を指定することができます。
このサンプルでは2を指定しているのでアニメーション周期を2回繰り返してアニメーションは終了します。
div{
animation-name: myLeft;
animation-duration: 2s;
animation-iteration-count: 2;
}
@keyframes myLeft{
0% {left: 0;}
100%{left: 490px;}
}
数値: 非整数の値でアニメーションを中断する
非整数の値とは、例えば0.5や1.25とか整数ではない数値のことです。 これを指定することでアニメーション周期の指定倍数分の動作を実現することができます。 なお、この値には負の数値は使用できません。
このサンプルでは非整数の1.5にしているのでアニメーション周期の1回と半分まで再生されます。
div{
animation-name: myLeft;
animation-duration: 2s;
animation-iteration-count: 1.5;
}
@keyframes myLeft{
0% {left: 0;}
100%{left: 490px;}
}
キワード値: infinite
infiniteキワードは、アニメーションを無限に繰り返します。
div{
animation-name: myLeft;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes myLeft{
0% {left: 0;}
100%{left: 490px;}
}
グローバル値
animation-iteration-countプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値の1に戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{animation-iteration-count: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承しない