CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

@keyframes

　@keyframesは 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 ルールは、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。

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