@keyframes

概要

@keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、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%、70%、100% のキーフレームで指定されています。

0% と 100% の両方のキーフレームで指定されているプロパティは、アニメーションされます。両方のキーフレームでは指定されていないプロパティは、アニメーション開始時の値がアニメーション中も維持されます。

構文

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

値

<identifier>

キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。

from

アニメーションの始まりである 0% を示す。

to

アニメーションの終わりである 100% を示す。

<percentage>

アニメーションの中で指定したキーフレームが発生する時間を示すパーセント値。

例示

CSS animations を参照してください。

仕様書

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

参考情報

• CSS animations
• CSS リファレンス
• AnimationEvent