@keyframes

CSS @ 規則の @keyframes は、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連のCSSアニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをCSS Transitionsよりも詳細に制御できます。

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScriptは、CSSオブジェクトモデルのインターフェイス CSSKeyframesRule によって @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%、100% のキーフレームで指定されています。

キーフレームが複数宣言された場合

キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、最後のキーフレームで指定された値だけが適用されます。例えば:

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

上の例の 50% のキーフレームでは top: 10px だけが適用され、このキーフレームでの他の全ての値は無視されます。

カスケード的なキーフレームは Firefox 14 から対応しています。上の例で言えば、キーフレーム 50% の値 left: 20px は適用されます。これは仕様書にはまだ定義されていませんが、議論中です。

キーフレーム内の !important

キーフレーム内で !important が付けられた宣言は無視されます<. /p>

@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>
}
where 
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+
where 
<keyframe-block> = <keyframe-selector># {
  <declaration-list>
}
where 
<keyframe-selector> = from | to | <percentage>

例

CSS アニメーションの利用 を参照してください。

仕様書

ブラウザーの対応

注意

1. @keyframes はFirefoxのスコープ付きスタイルシートに対応していません (バグ 830056)。

関連情報

• CSS アニメーションの利用
• AnimationEvent