CSSアニメーション | 繰り返し処理(animation-iteration-count)の値と比較用の動作パターン集

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

css

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

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無限再生パターン

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

animation-iteration-countのベンダープレフィックス設定は不要

animationプロパティおよびanimation-iteration-countプロパティのベンダープレフィックス記述は、iOS8以下とAndroid4.4.4以下に対応する目的以外では現在では既に不要となっています。

iOS8以下とAndroid4.4.4以下の端末も2020年現在のシェアからみても対応する価値は少ないと考えられます。

iOS8以下やAndroid4.4.4以下でもanimation-iteration-countを対応させる場合のみ以下のベンダープレフィックスを追記します。

 -webkit-animation: fadeIn 1s 5;
-webkit-animation-iteration-count: 5;

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

Posted by Yousuke.U