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 の定義
草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 16
補足
完全対応 16
補足
補足 @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
完全対応 5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 未対応 12.1 — 15
未対応 12.1 — 15
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 16
完全対応 16
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
完全対応 5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Ignore !important declarationsChrome ? Edge ? Firefox 完全対応 19IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 19Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

注意

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

関連情報

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

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