CSS | アニメーションの繰り返し処理で指定可能な値と比較

2020-01-082020-09-27CSS アニメーション基本,CSS

animationプロパティを使ったCSSアニメーションは人気で様々な場所で利用されていますが、アニメーションの繰り返し設定や、繰り返し繰り返しではなく一回、アニメーションの終点で停止する設定の各動作パターンの紹介です。

1. animation-iteration-countを設定値毎のパターンで比較
2. animation-iteration-count（繰り返し設定）の値一覧
3. animation-iteration-countのベンダープレフィックス設定は不要

animation-iteration-countを設定値毎のパターンで比較

animation-iteration-countで設定可能な値毎のパターンで動作を比較します。

See the Pen CSS animation iteration count by yochans (@yochans) on CodePen.

アニメーション時間は3秒、繰り返しはinfinite（無制限）、widthにて横幅変更しています。

 <div class="samles">
  <div class="ease">ease(デフォルト値)</div>
  <div class="linear">linear</div>
  <div class="ease-in">ease-in</div>
  <div class="ease-out">ease-out</div>
  <div class="ease-in-out">ease-in-out</div>
  <div class="steps">steps</div>
 </div>

.samles div{
  width: 100%;
  max-width: 90%;
  margin: 6px;
  color: white;
  padding: 0.25em;
  background: #0091EA;
  white-space: nowrap;
}

.sample1{
  animation: bar-animation 1s 0;
}
.sample2{
  animation: bar-animation 1s 1;
}
.sample3{
  animation: bar-animation 1s infinite;
}
.sample4{
  animation: animation 1s infinite alternate;
}

@keyframes animation{
  0%{
    width: 10%;
  }
  100%{
    width: 100%;
  }
}

animation-iteration-count（繰り返し設定）の値一覧

動作サンプルではanimationプロパティのanimation-iteration-count（繰り返し設定）での設定を0、1、infinite（無制限）、infinite + alternateの4種類のパターンを表示しています。

以下はanimation-iteration-count（繰り返し設定）で設定できる値の一覧になります。

0	アニメーションは再生しない
1	一度だけ再生する、デフォルト値なので未記入可
2～	指定した数値分のアニメーションが再生される
infinite	無限再生パターン

また、動作サンプルの４つめではanimation-direction（再生方向）プロパティにて「alternate」を設定していますが、alternateを指定した場合は動作サンプルのようにinfiniteでの無限再生の際に、正方向再生後、逆方向再生が行われるようになります。