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;
ディスカッション
コメント一覧
まだ、コメントがありません