@keyframes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

構文

css
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

<custom-ident>

キーフレームのリストを識別する名前。これは CSS 構文で定義されている識別子に適合する必要があります。

from

アニメーションの始まりである 0% を示します。

to

アニメーションの終わりである 100% を示します。

<percentage>

指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。

解説

JavaScript は、 CSS オブジェクトモデルのインターフェイス CSSKeyframesRule によって @keyframes アットルールにアクセスできます。

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 animation-name プロパティで指定したものと同じ名前がついた @keyframes ルールを作成します。それぞれの @keyframes ルールは、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。

キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。

有効なキーフレームのリスト

キーフレームルールにアニメーションの開始と終了の状態 (0%/from100%/to) を明示しない場合、ブラウザーはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。

キーフレームルールにアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。

重複の解決

複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 @keyframes ルールがカスケード的に継承されることはないため、アニメーションが複数のルールセットによるキーフレームをもとにして行われることはありません。

指定されたアニメーションのタイムオフセットが重複している場合は、 @keyframes ルール内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 @keyframes ルールの中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。

一部のキーフレームでプロパティが指定されていない場合

一部のキーフレームでしか指定されていないプロパティは、補完されます(ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。

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

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

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

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

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

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

キーフレーム内の !important

キーフレーム内で !important が付けられた宣言は無視されます。

css
@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;
  }
}

形式文法

@keyframes = 
@keyframes <keyframes-name> { <qualified-rule-list> }

<keyframes-name> =
<custom-ident> |
<string>

CSS アニメーションの例

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

仕様書

Specification
CSS Animations Level 1
# keyframes

ブラウザーの互換性

BCD tables only load in the browser

関連情報