Aug. 27th,2021
プロパティについて
＃
概要
| 初期値 | “animation-fill-mode: none;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定したキーワードをアイテムとするリスト |
| アニメーション | 不可 |
“animation-fill-mode”プロパティは“animation-name”プロパティなどで指定されたアニメーションの適用対象となる要素にアニメーションによって適用されるスタイルをアニメーションの実行前後にも適用するかを指定するプロパティです。
既定では“@keyframes”ルールによって指定されるアニメーション用のスタイルはアニメーションの実行中にだけ適用されますが、“animation-fill-mode”プロパティによる設定で“animation-delay”プロパティで指定された遅延時間中やアニメーションが終了した後にもアニメーションによって適用されるスタイルを保持することができます。
サンプルコード
div { animation-fill-mode: both;}
＃
値
| 値 | 説明 |
|---|---|
| “<single-animation-fill-mode>”値 | |
| none | アニメーションは実行中以外は何の効果ももたらしません |
| forwards | アニメーションが終了した後もアニメーションの最後のフレームで適用されるスタイルを適用し続けます (アニメーションの開始前はアニメーションによるスタイルは適用されません。) |
| backwards | “animation-delay”プロパティで指定した遅延時間中もアニメーションの最初のフレームで適用されるスタイルを適用します (アニメーションの終了後はアニメーションによるスタイルは適用されません。) |
| both | “forwards”と“backwards”の両方の効果が適用されます (アニメーションの開始前と開始後にもアニメーションによるスタイルを適用します。) |
| 他の値 | |
| 共通キーワード | |
＃
複数のアニメーションを指定する
“animation-name”プロパティで複数のアニメーションが指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのアニメーションの実行前後にアニメーションで適用されるスタイルを適用するかを指定することができます。値の順番は“animation-name”プロパティで指定した値の順番に対応します。
div {
animation-name: 〚1個目のアニメーション〛,〚2個目のアニメーション〛,〚3個目のアニメーション〛,...;
animation-fill-mode: 〚1個目のアニメーションの設定〛,〚2個目のアニメーションの設定〛,〚3個目のアニメーションの設定〛,...;
}
＃
使用例
＃
実行前後はアニメーションのスタイルは適用しない
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: none;
}
@keyframes SampleAnime1 {
0% { transform: translate(-150px); }
100% { transform: translate(150px); }
}
＃
実行後もアニメーションのスタイルを適用する
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes SampleAnime1 {
0% { transform: translate(-150px); }
100% { transform: translate(150px); }
}
＃
実行前もアニメーションのスタイルを適用する
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: backwards;
}
@keyframes SampleAnime1 {
0% { transform: translate(-150px); }
100% { transform: translate(150px); }
}
＃
実行前後もアニメーションのスタイルを適用する
.sample-box {
animation-name: SampleAnime1;
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: both;
}
@keyframes SampleAnime1 {
0% { transform: translate(-150px); }
100% { transform: translate(150px); }
}
＃
複数のアニメーションを指定する
.sample-box {
animation-name: SampleAnime1, SampleAnime2;
animation-duration: 3s, 3s;
animation-delay: 1s, 1s;
animation-iteration-count: 1, 1;
animation-fill-mode: none,forwards;
}
@keyframes SampleAnime1 {
0% { transform: translate(-150px); }
100% { transform: translate(150px); }
}
@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)} /* ■ */
}
