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

@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%, 72%, 100% のキーフレームで指定されています。

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

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

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

この例では、 50% のキーフレームで、使用される値は top: 10pxleft: 20px です。

カスケード的なキーフレームは Firefox 14 から対応しています。

キーフレーム内の !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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@keyframesChrome 完全対応 43
完全対応 43
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 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 完全対応 30
完全対応 30
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 15
未対応 12 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 9
完全対応 9
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 43
完全対応 43
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 43
完全対応 43
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
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 完全対応 30
完全対応 30
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 12.1 — 14
未対応 12 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 9
完全対応 9
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 4.0
完全対応 4.0
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Ignore !important declarationsChrome 完全対応 45Edge 未対応 なしFirefox 完全対応 19IE 未対応 なしOpera 完全対応 32Safari 完全対応 10.1WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 19Opera Android 完全対応 32Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 5.0

凡例

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

メモ

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

関連情報

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

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