CSSアニメーション

CSSアニメーションは、HTML要素に対してアニメーション効果を加えるためのCSSプロパティを使用した手法です。JavaScriptを使用せずに、要素の色やサイズ、位置などを動的に変化させることができるため、ウェブサイトに視覚的な演出やインタラクティブな体験を追加するために使用されます。

CSSアニメーションには主に以下の2種類があります。

トランジション（Transition）
特定の状態の変化をアニメーションで表現します。例えば、ホバーした時にボタンの色がゆっくりと変わる効果を実現できます。
キーフレームアニメーション（Keyframes Animation）
一連の動きを段階的に定義し、複雑なアニメーションを作成できます。アニメーションの始めから終わりまでの各ステップを指定することで、滑らかな動きを実現します。

トランジションの使用方法

トランジションを使用することで、要素のプロパティが変化するときにアニメーション効果を付加できます。基本的な構文は以下の通りです。

.element {
  transition: プロパティ名 持続時間 イージング タイミング;
}

トランジションの例

ボタンにホバーしたときに色が変わるトランジションの例です。

.button {
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: #2ecc71;
}

このコードでは、ボタンにカーソルを合わせると、背景色が0.5秒かけて滑らかに変わります。

キーフレームアニメーションの使用方法

キーフレームを使用すると、複雑なアニメーションを段階的に作成できます。@keyframesルールでアニメーションの各ステップを定義し、それを要素に適用します。

@keyframes アニメーション名 {
  from {
    /* 初期のプロパティ */
  }
  to {
    /* 終了時のプロパティ */
  }
}

または、0%から100%までの途中ステップを自由に設定できます。

キーフレームアニメーションの例

要素が右から左にスライドするアニメーションの例です。

@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation: slide 2s ease-in-out;
}

このコードでは、.elementにslideというアニメーションが適用され、2秒間かけて右から左にスライドします。

アニメーションプロパティ

キーフレームアニメーションでは、以下のプロパティを使用してアニメーションを制御できます。

animation-name
適用するアニメーションの名前（@keyframesで定義した名前）を指定します。
animation-duration
アニメーションが再生される時間を設定します。
animation-timing-function
アニメーションの速度変化を指定します（例：ease、linear、ease-in、ease-outなど）。
animation-delay
アニメーションが開始するまでの待機時間を指定します。
animation-iteration-count
アニメーションの繰り返し回数を指定します。infiniteを指定すると無限に繰り返します。
animation-direction
アニメーションの再生方向を指定します（例：normal、reverse、alternateなど）。

複数プロパティをまとめて指定する例

.element {
  animation: slide 2s ease-in-out 0.5s infinite alternate;
}

上記のコードでは、slideアニメーションが2秒間で再生され、0.5秒遅れて開始し、無限に繰り返されます。また、毎回逆方向で再生されるように設定されています。