概要

@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 を参照してください。

仕様書

Specification Status Comment
CSS Animations Level 3 草案  

ブラウザの互換性

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!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 5.0 (5.0)-moz 10 12 -o 4.0-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

参考情報

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

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