CSSアニメーションの基本！@keyframesを使った動きの作り方を解説

CSSアニメーションとは

アニメーションとは、要素に動きの効果を持たせ、見た目を時間の経過とともに変化させる仕組みのことです。CSSはさまざまなアニメーション効果をサポートしており、JavaScriptなどを使わなくても、要素の色やサイズ、位置などを滑らかに変化させることができます。

キーフレーム（@keyframes）の役割

CSSのアニメーションでは、「キーフレーム（Keyframes）」という重要な概念が使われます。@keyframesを定義することで、アニメーションの開始時点から終了時点までの中間ステップを細かく制御でき、複雑な動きも表現可能になります。

記述例

以下の例では、@keyframesの構文を使って、アニメーションの対象となる要素の高さ・幅・背景色の変化や、アニメーション名・再生時間（duration）の指定方法を示しています。

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

各プロパティの解説

• animation-name：適用する@keyframesの名前を指定します。上記の例では「animation」という名前のキーフレームを呼び出しています。
• animation-duration：アニメーションが1回完了するまでの所要時間を指定します。「5s」の場合、5秒かけて背景色がピンクから緑へと変化します。

このように、@keyframesで「from（開始時）」と「to（終了時）」の状態を定義し、要素側でアニメーション名と再生時間を指定するだけで、シンプルな色変化アニメーションを実装できます。