Aug. 28th,2021
“@keyframes”ルール
“@keyframes”ルールは“animation”プロパティなどによって要素に適用されるアニメーションのキーフレームを設定します。
CSSのアニメーションでは時間の経過とともに要素に適用されるスタイルを変更していくことでアニメーションを表現しますが、“@keyframes”ルールはアニメーションの開始時と終了時、および中間ステップとなるキーフレームでアニメーションの対象要素に適用されるスタイルを指定します。
“@keyframes”ルールの構文
“@keyframes”ルールは“@keyframes”に続く、キーフレームの名前(“<keyframes-name>”)と“{”と“}”で囲まれたそれぞれのキーフレームの設定を内包する1個のブロックからなります。
@keyframes 〚キーフレームの名前〛 {
from {〚最初のキーフレームに適用するスタイル〛}
to {〚最後のキーフレームに適用するスタイル〛}
}
キーフレームの名前(“<keyframes-name>”)は“<custom-ident>”、もしくは“<string>”の構文に従ったものとして定義します。ここで指定した名前は“animation-name”プロパティによってキーフレームをアニメーションの対象要素と関連付けるために使用されます。
同じ名前を持つ“@keyframes”ルールが複数ある場合は最後に記述されたものが使用され、それよりも前に記述されたものは無視されます。
“@keyframes”ルールは“{”と“}”で囲まれたブロックを1個だけ持つことができ、その中にそれぞれのキーフレームの設定を内包します。
キーフレームの設定はそれぞれキーフレームのアニメーションの中での位置を示すキーフレーム・セレクタとそのキーフレームで適用されるスタイルの宣言を内包する“{”と“}”で囲まれた宣言ブロックからなります。
キーフレーム・セレクタはアニメーションの開始を“0%”、終了を“100%”としたパーセント値(“<percentage>”)で指定します。
@keyframes 〚キーフレームの名前〛 {
0% {〚最初のキーフレームに適用するスタイル〛}
25% {〚開始から25%の時点のキーフレームに適用するスタイル〛}
100% {〚最後のキーフレームに適用するスタイル〛}
}
“0%”よりも小さい、もしくは“100%”よりも大きい“<percentage>”は無効であり、そのキーフレームは無視されます。
最初と最後のキーフレームはそれぞれ“from”と“to”のキーワードでも表すことができます。
@keyframes 〚キーフレームの名前〛 {
from {〚最初のキーフレームに適用するスタイル〛}
25% {〚開始から25%の時点のキーフレームに適用するスタイル〛}
to {〚最後のキーフレームに適用するスタイル〛}
}
“0%”もしくは“from”のキーフレーム・セレクタを持つキーフレームがない場合は最初のキーフレームを、“100%”もしくは“to”のキーフレーム・セレクタを持つキーフレームがない場合は最後のキーフレームをアニメーションの適用対象の要素にもともと適用されているスタイルを使用して生成します。
複数のキーフレームで同じスタイルを適用する場合はキーフレーム・セレクタをコンマ(“,”)で区切って複数記述することで複数のキーフレーム・セレクタで1個の宣言ブロックを共有することができます。
@keyframes 〚キーフレームの名前〛 {
0% {〚最初のキーフレームに適用するスタイル〛}
25%,50% {〚開始から25%と50%の時点のキーフレームに適用するスタイル〛}
100% {〚最後のキーフレームに適用するスタイル〛}
}
同じキーフレーム・セレクタを持つ宣言ブロックが複数ある場合には該当する宣言ブロックに含まれるスタイルはすべてそのキーフレームに適用されます。ただし、競合するスタイルの宣言は通常のスタイル・ルールと同様にカスケードによって適用されるスタイルが1個だけ決定されます。
同じ要素に適用される複数の異なる“@keyframes”ルールに同じプロパティによる宣言がある場合、一番後に記述された“animation-name”プロパティによって要素に関連付けられた“@keyframes”ルールの宣言が優先されます。
キーフレーム・セレクタに続く宣言ブロックには通常のセレクタに続くスタイル・ルールの宣言ブロックと同様に複数のプロパティと値の組を記述することができます。一部のキーフレームで指定されていないプロパティや一部のキーフレームで無効な値が指定されたプロパティのそのキーフレームでの値は補間によって決められます。
なお、“!important”はキーフレームの設定には使用できず、“!important”が付けられた宣言は無視されます。
使用例
.sample-box {
animation-name: SampleAnime1, SampleAnime2;
animation-duration: 5s, 2.5s;
animation-timing-function: ease-in-out, linear;
animation-iteration-count: 1, 2;
}
@keyframes SampleAnime1 {
from { transform: translate(0) rotate(0); }
to { transform: translate(300px) rotate(360deg); }
}
@keyframes SampleAnime2 {
0% {
background-color: rgb(71,209,209); /* ■ */
color:rgba(0,0,0,0);
}
20% { background-color: rgb(170,207,83);} /* ■ */
40% { background-color: rgb(248,184,98);} /* ■ */
50% { color:rgba(0,0,0,1);}
60% { background-color: rgb(211,56,28);} /* ■ */
80% { background-color: rgb(233,84,107);} /* ■ */
100% {
background-color: rgb(180,76,151;); /* ■ */
color:rgba(0,0,0,0)};
}
}
<div class="sample-box">
♣
</div>
