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%/from100%/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 アニメーションの利用 を参照してください。

仕様書

仕様書 状態 備考
CSS Animations
@keyframes の定義
草案  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

43

あり -webkit-

あり

161

49 -webkit-

44 -webkit- 2

5 -moz-

10

12.1 — 15

15 -webkit-

12 — 15 -o-

9

4 -webkit-

Ignore !important declarations ? ?19 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

43

あり -webkit-

43

あり -webkit-

あり

16

49 -webkit-

44 -webkit- 2

5 -moz-

12.1

15 -webkit-

12 — 14 -o-

あり

あり -webkit-

4.0

あり -webkit-

Ignore !important declarations ? ? ?19 ? ? ?

1. @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

注意

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: sutara79, Simplexible, fscholz, ethertank, yyss
最終更新者: sutara79,