CSS3アニメーションの基本：@keyframesの使い方をわかりやすく解説

CSS3アニメーションにおける@keyframesとは

@keyframesは、CSS3においてアニメーションの途中経過（中間ステップ）を細かく制御するための仕組みです。アニメーションの開始時点と終了時点、さらには任意の中間地点のスタイルを定義することで、滑らかで表現力豊かな動きを実現できます。

ここでは、要素の幅・高さ・背景色を変化させ、アニメーション名と再生時間を指定する基本的な例を紹介します。

@keyframesの基本構文

以下の例では、背景色がピンクから緑へと5秒かけて変化するシンプルなアニメーションを定義しています。

@keyframes animation {
  from {background-color: pink;}
  to {background-color: green;}
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
}

コードの解説

このコードの各部分の役割は以下のとおりです。

• @keyframes animation：アニメーションの内容を定義します。「animation」は任意のアニメーション名です。
• from：アニメーション開始時点（0%に相当）のスタイルを指定します。
• to：アニメーション終了時点（100%に相当）のスタイルを指定します。
• animation-name：要素に適用するアニメーション名を指定します。
• animation-duration：アニメーションが完了するまでの時間を指定します。この例では5秒です。

パーセント指定でより細かい制御を行う

fromとtoの代わりに、0%〜100%のパーセント値を使うことで、複数の中間ステップを持つアニメーションを定義することも可能です。

@keyframes example {
  0%   {background-color: pink;}
  50%  {background-color: yellow;}
  100% {background-color: green;}
}

このように@keyframesを活用すると、色の変化だけでなく、位置・サイズ・透明度など、さまざまなプロパティを時間軸に沿って自在に制御できます。CSS3アニメーションを使いこなすための第一歩として、まずはこの基本構文をマスターしましょう。