@keyframes

<custom-ident>

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

from

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

to

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

<percentage>

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

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

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 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%, 68%, 72%, 100% のキーフレームで指定されています。

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

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

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

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

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

@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> { <rule-list> }  

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

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

• CSS アニメーションの使用
• AnimationEvent