はじめに
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の使用例
@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プロパティと組み合わせることで、移動、回転、スケーリングなど、 多彩なアニメーション効果を実現できます。
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 を活用し、パフォーマンスが優れています：
transformopacity
一方、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）
アニメーションをJavaScriptで制御できますか？
はい、できます。JavaScriptでクラスを追加・削除することで、CSSアニメーションを制御できます。 また、animation.play()やanimation.pause()で細かく制御することも可能です。
古いブラウザでも動作しますか？
CSS アニメーションはIE10以上で対応しています。古いブラウザをサポートする場合は、 -webkit- や -moz- などのベンダープレフィックスが必要です。
複数のアニメーションを同時に適用できますか？
はい。複数のアニメーション名をカンマで区切って指定できます： animation: slide 2s, fade 1s;
パフォーマンスを改善するコツは？
transformとopacityを使用し、レイアウト再計算を避けることが重要です。 また、不要なアニメーション終了時にanimation: noneで停止させることで、リソース消費を減らせます。
まとめ
CSSアニメーションは、Webページに生動感とプロフェッショナルな印象を与える強力なツールです。 transitionで簡単なアニメーション、@keyframesで複雑なアニメーションを実現できます。 パフォーマンスに配慮しながら、ユーザーエクスペリエンスを向上させるアニメーションを活用してください。