Aug. 27th,2021
プロパティについて
＃
概要
| 初期値 | “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個目のアニメーションの繰り返し回数〛,...;
}
＃
使用例
＃
アニメーションの繰り返し回数を指定する
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-iteration-count: 1;
}
@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
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: 1.5;
}
@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)} /* ■ */
}
