CSSで使えるアニメーションの基本と実例

CSSアニメーションは、Webデザインに動きを与え、ユーザー体験を向上させるために欠かせない要素です。本記事では、CSSアニメーションの基本から応用例までを解説します。

CSSアニメーションとは？

CSSアニメーションを使用することで、HTML要素の見た目や位置を時間の経過とともに変化させることができます。主に以下の2つの方法で実装されます：

@keyframesを使ったアニメーション
トランジション（transition）を使ったアニメーション

基本構文

`@keyframes`を使用したアニメーション

@keyframesを使うと、要素のプロパティを細かく制御してアニメーションを作成できます。

cssコードをコピーする@keyframes example {
  0% { transform: translateX(0); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  animation: example 2s infinite;
}

トランジションを使用したアニメーション

トランジションは、状態の変化を滑らかにするために使用されます。

cssコードをコピーする.transition-box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transition: background-color 0.5s;
}

.transition-box:hover {
  background-color: teal;
}

実例：よく使われるアニメーション

1. フェードイン・フェードアウト

要素の透明度を変化させることで、フェード効果を実現します。

cssコードをコピーする@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

2. バウンドアニメーション

要素が弾むような動きを表現します。

cssコードをコピーする@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: bounce 1s infinite;
}

3. 回転アニメーション

要素を360度回転させます。

cssコードをコピーする@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 2s linear infinite;
}

アニメーションの応用テクニック

アニメーションの遅延設定

animation-delayを使ってアニメーションの開始時間を遅らせることができます。

cssコードをコピーする.delayed {
  animation: fadeIn 2s ease-in 1s;
}

スクロールに連動するアニメーション

JavaScriptと組み合わせることで、スクロールに応じたアニメーションを実現できます。

パフォーマンスに注意

CSSアニメーションは便利ですが、特にモバイル環境ではパフォーマンスに影響を与えることがあります。以下のポイントに注意しましょう：

GPUで処理されるプロパティを優先（例：transformやopacity）。
過剰なアニメーションを避ける。
アニメーションのループ回数を適切に設定する。

まとめ

CSSアニメーションを活用すると、Webサイトに動きと魅力を加えることができます。本記事で紹介した基本と実例を参考に、効果的なアニメーションを作成してみてください！