このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

animation-iteration-count”プロパティ:アニメーションの繰り返しCSS3で追加

記事Aug. 27th,2021
アニメーションを繰り返す回数を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 animation-iteration-count: 1;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した数値、もしくは“infinite”をアイテムとするリスト
アニメーション 不可

animation-iteration-count”プロパティはanimation-name”プロパティなどで指定されたアニメーションが繰り返される回数を指定するプロパティです。

アニメーションを複数回繰り返す場合、既定ではアニメーションが終わると次も最初から再生を開始しますが、animation-direction”プロパティの値が“alternate”もしくは“alternate-reverse”であれば奇数回と偶数回で再生方向が変わるので連続的なアニメーションになります。

サンプルコード

div { animation-iteration-count: 10;}

説明
infinite アニメーションは永遠に繰り返されます
<number> アニメーションは指定された回数繰り返されます (整数でない場合はアニメーションが最後に繰り返された時に途中で終了します。負の値は無効です。)
0 アニメーションは瞬時に実行され、アニメーションの最初と最後以外のフレームは効果がありません
共通キーワード

animation-iteration-count”プロパティの値が“0”の場合、animation-fill-mode”プロパティanimation-delay”プロパティの値によってアニメーションの対象の要素がどのように表示されるかが異なります。

animation-fill-mode”プロパティの値が“forwards”の場合
animation-delay”プロパティで指定された時間の間はアニメーションの最初のフレームが表示され、その後はアニメーションによって設定されるスタイルは適用されません。
animation-fill-mode”プロパティの値が“backwards”の場合
animation-delay”プロパティで指定された時間の間はアニメーションによって設定されるスタイルは適用されず、その後はアニメーションの最後のフレームが表示されます。
animation-fill-mode”プロパティの値が“both”の場合
animation-delay”プロパティで指定された時間の間はアニメーションの最初のフレームが表示され、その後は最後のフレームが表示されます。
animation-fill-mode”プロパティの値が“none”の場合
アニメーションは何の効果ももたらしません。アニメーションによって設定されるスタイルは適用されず、他所で設定されるスタイルだけ適用されます。

複数のアニメーションを指定する

animation-name”プロパティで複数のアニメーションが指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのアニメーションを繰り返す回数を指定することができます。値の順番はanimation-name”プロパティで指定した値の順番に対応します。

div {
animation-name: 〚1個目のアニメーション〛,〚2個目のアニメーション〛,〚3個目のアニメーション〛,...;
animation-iteration-count: 〚1個目のアニメーションの繰り返し回数〛,〚2個目のアニメーションの繰り返し回数〛,〚3個目のアニメーションの繰り返し回数〛,...;
}

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
animation-iteration-count
定義あり
Level 1
作業草稿(WD)
infinite
定義あり
<number>
定義あり

使用例

アニメーションの繰り返し回数を指定する

.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-iteration-count: 1;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
*アニメーションha実行します
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-iteration-count: 3;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
*マウスをホバーしている間にアニメーションが適用されます
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-iteration-count: 1.5;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
*マウスをホバーしている間にアニメーションが適用されます

アニメーションを永遠に繰り返す

.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
*マウスをホバーしている間にアニメーションが適用されます

アニメーションを瞬時に実行する

.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: 0;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
*マウスをホバーしている間にアニメーションが適用されます

複数のアニメーションを指定する

.sample-box {
animation-name: SampleAnime1, SampleAnime2;
animation-duration: 5s, 10s;
animation-iteration-count: 1,infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}

@keyframes SampleAnime2 {
0% { background-color: rgb(71,209,209)} /* */
20% { background-color: rgb(170,207,83)} /* */
40% { background-color: rgb(248,184,98)} /* */
60% { background-color: rgb(211,56,28)} /* */
80% { background-color: rgb(233,84,107)} /* */
100% { background-color: rgb(180,76,151)} /* */
}
*マウスをホバーしている間にアニメーションが適用されます
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク