今回は【CSS】animation-iteration-count・アニメーションの回数を指定する!
の解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
animation
プロパティについて学びたい方へ - 今回はanimation-iteration-countでアニメーションの実行回数についての解説になります。
今回は、animationに関する記事になります。
animation-iteration-countとは、アニメーションの実行回数を指定します。
前回の復習とかねて解説していきます。
animation-iteration-countの使い方について
animation-iteration-count
プロパティとは、アニメーションの実行回数を指定します。
アニメーションに対して何回繰り返すかの指定が可能になります。
書き方は以下のようになります
/*--@keyframes--*/
@keyframes アニメーション名 {
/*--省略--*/
}
要素 {
animation-name: アニメーション名;
animation-duration: 時間(値);
animation-iteration-count: 値;
}
animation-iteration-count 指定方法について
animation-iteration-count
プロパティは、アニメーションの実行回数を指定します。
指定がない場合は1回の実行で終了します。初期値は「1」になります。
- 指定できる値
- 数値(初期値「1」)
アニメーションを何回実行するかを数値で指定します
- infinite
アニメーションを無限に繰り返します
今回は、開始の指定を0%の場合は、「width:0」、終了の指定は100%の場合は「width:100%」になっております。
共通部分である、アニメーション名「name: animation-sample」になっております。
アニメーションの1回分の時間は「duration: 3s」3秒になっております。
「01.デフォルト」は1回のみで終了します。
「02.3回繰り返す」は3回繰り返して終了します。
「03.無限に繰り返す」は無限に繰り返します、リセットボタンを押して初期状態に戻ります。
iteration-countの指定
01.デフォルト
Default
02.3回繰り返す
3count
03.無限に繰り返す
∞
<!--01.デフォルト-->
<div class="iteration-count01 iteration-count">Default</div>
<!--02.3回繰り返す-->
<div class="iteration-count02 iteration-count">3count</div>
<!--03.無限に繰り返す-->
<div class="iteration-count03 iteration-count">∞</div>
/*--共通 CSS--*/
.iteration-count {
width: 120px;
height: 100px;
line-height: 100px;
color: #333;
text-indent: 10px;
background-color: #fd6158;
}
/*--デフォルト--*/
.iteration-count01{
animation-name: animation-sample; /*--アニメーション名--*/
animation-duration: 3s; /*--時間--*/
/*--デフォルトのため、countの指定はなし--*/
}
/*--3回繰り返す--*/
.iteration-count02 {/*--アニメーション名・時間省略--*/
animation-iteration-count: 3; /*--実行回数--*/
}
/*--無限に繰り返す--*/
.iteration-count03 {/*--アニメーション名・時間省略--*/
animation-iteration-count: infinite; /*--実行回数--*/
}
@keyframes animation-sample {
0% {
width: 0;
}
100% {
width: 100%;
}
}
関連記事
【STEP01 CSS】@keyframesの使い方アニメーションの動きを指定する
@keyframesとは、アニメーションの動きとタイミングを指定する際に使います。
【STEP02 CSS】animation-delayの使い方アニメーションの開始を指定する
animation-delayとは、アニメーションが開始するまでの時間を指定します。
【STEP03 CSS】animation-play-stateの使い方・再生状態を指定する
animation-play-stateとは、アニメーションが再生中か一時停止状態かを指定します。
【STEP04 CSS】animation-fill-modeの使い方・実行前後を指定する
animation-fill-modeとは、アニメーションの実行前後のスタイルを指定します。
【STEP05 CSS】animation-timing-functionの使い方・変化を指定する
animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。
【STEP07 CSS】animation-directionの使い方・ 再生方向を指定する
animation-directionとは、アニメーションの再生方向を指定します。
【STEP08 CSS】animationプロパティの一括指定!まとめ
まとめ
今回はこれで以上です。
今回紹介したのは、アニメーションの実行回数について解説しました。
次回は「アニメーションの再生方向」について解説します。
- POINT
-
animation-iteration-count
とは、アニメーションの実行回数を指定します。 - 指定がない場合は1回の実行で終了します。初期値は「1」になります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事