@keyframes
CSS の @keyframes
@-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを CSS トランジションよりも詳細に制御できます。
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
JavaScript は、 CSS オブジェクトモデルのインターフェイス CSSKeyframesRule
(en-US) によって @keyframes
@-規則にアクセスできます。
キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 animation-name
プロパティで指定したものと同じ名前がついた @keyframes
規則を作成します。それぞれの @keyframes
規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。
キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。
有効なキーフレームのリスト
キーフレーム規則にアニメーションの開始と終了の状態 (0%
/from
と 100%
/to
) を明示しない場合、ブラウザはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。
キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。
重複の解決
複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 @keyframes
規則がカスケード的に継承されることはないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。
指定されたアニメーションのタイムオフセットが重複している場合は、 @keyframes
規則内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 @keyframes
規則の中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。
一部のキーフレームでプロパティが指定されていない場合
一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
この例では、 top
プロパティは 0%
, 30%
, 100%
のキーフレームでアニメーション指定されています。また、 left
プロパティは 0%
, 68%
, 72%
, 100%
のキーフレームで指定されています。
キーフレームが複数宣言された場合
キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、
@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
この例では、 50%
のキーフレームで、使用される値は top: 10px
と left: 20px
です。
カスケード的なキーフレームは Firefox 14 から対応しています。
キーフレーム内の !important
キーフレーム内で !important
が付けられた宣言は無視されます。
@keyframes important1 {
from { margin-top: 50px; }
50% { margin-top: 150px !important; } /* 無視される */
to { margin-top: 100px; }
}
@keyframes important2 {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* 無視される */
margin-bottom: 50px; }
}
構文
値
<custom-ident>
- キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。
from
- アニメーションの始まりである
0%
を示します。 to
- アニメーションの終わりである
100%
を示します。 <percentage>
- 指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。
形式文法
@keyframes <keyframes-name> { <keyframe-block-list> }ここで
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+ここで
<keyframe-block> = <keyframe-selector># { <declaration-list> }
ここで
<keyframe-selector> = from | to | <percentage>
例
CSS アニメーションの利用 を参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations Level 1 @keyframes の定義 |
草案 |
ブラウザーの互換性
BCD tables only load in the browser