🎬 CSSアニメーション完全ガイド

はじめに

Webデザインにおいて、アニメーションは ユーザーエクスペリエンスを大幅に向上させることができます。 CSSアニメーションは、JavaScriptなしで滑らかで効率的なアニメーション効果を実現できる強力なツールです。 このガイドでは、基本から応用まで、CSSアニメーションについて詳しく解説します。

1. Transitionプロパティの基本

transitionは、CSS プロパティの値が変更される際に、その変更をアニメーションします。 最もシンプルで、頻繁に使用されるアニメーション手法です。

.element {
  transition: property duration timing-function delay;
}

/* 例 */
.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: red;
}

Transitionのプロパティ

• transition-property: アニメーション対象のプロパティ（all, color, width等）
• transition-duration: アニメーション時間（秒またはミリ秒）
• transition-timing-function: 時間に沿った動きの加速度（ease, linear, ease-in等）
• transition-delay: アニメーション開始の遅延時間

2. @keyframesでアニメーション定義

より複雑なアニメーションを作成するには、@keyframesルールを使用します。 これにより、複数のキーフレームを定義して、詳細なアニメーションシーケンスを作成できます。

@keyframes slide {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}

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

3. Animationプロパティの詳細

animationプロパティは、定義された@keyframesをページ上の要素に適用します。

主要なプロパティ

• animation-name: @keyframesで定義した アニメーション名
• animation-duration: アニメーションの継続時間
• animation-timing-function: 加速度曲線
• animation-delay: 開始時間の遅延
• animation-iteration-count: 繰り返し回数（数字またはinfinite）
• animation-direction: 逆方向再生（normal, reverse, alternate）
• animation-fill-mode: アニメーション前後の状態（forwards, backwards, both）

4. Transformプロパティとの組み合わせ

transformプロパティと組み合わせることで、移動、回転、スケーリングなど、 多彩なアニメーション効果を実現できます。

@keyframes rotate-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.spinner {
  animation: rotate-scale 2s linear infinite;
}

5. パフォーマンス最適化

アニメーションを多用する場合、パフォーマンスに配慮する必要があります。 以下のプロパティは、ブラウザのGPU を活用し、パフォーマンスが優れています：

• transform
• opacity

一方、width、height、left などのレイアウトに関わるプロパティは、 レイアウト再計算を発生させるため、パフォーマンスに悪影響を与えます。

6. 実践的な例

ローディングスピナー

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e8a040;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

パルスエフェクト

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

よくある質問（FAQ）

まとめ

CSSアニメーションは、Webページに生動感とプロフェッショナルな印象を与える強力なツールです。 transitionで簡単なアニメーション、@keyframesで複雑なアニメーションを実現できます。 パフォーマンスに配慮しながら、ユーザーエクスペリエンスを向上させるアニメーションを活用してください。