概要

CSSのanimationプロパティは、要素にアニメーション効果を追加するためのプロパティです。アニメーションを使用することで、デザインに動きを加え、ユーザーにインタラクティブで視覚的に魅力的な体験を提供できます。この記事では、animationの基本的な使い方から応用テクニックまで詳しく解説します。

基本構文

animationプロパティは複数のサブプロパティの組み合わせで成り立ちます。基本構文は以下の通りです。

animation: アニメーション名 持続時間 タイミング関数 遅延時間 回数 再生方向;

各パラメータの詳細は次の通りです：

  • アニメーション名: @keyframesで定義したアニメーションの名前を指定します。
  • 持続時間: アニメーションが完了するまでの時間を指定します（例: 2s, 500ms）。
  • タイミング関数: アニメーションの進行速度を制御します（例: ease, linear, ease-in, ease-out）。
  • 遅延時間: アニメーションが開始するまでの遅延時間を指定します。
  • 回数: アニメーションの繰り返し回数を指定します（例: infiniteで無限ループ）。
  • 再生方向: アニメーションの再生方向を指定します（例: normal, reverse, alternate）。

基本的な使用例

シンプルなフェードインアニメーション

以下の例では、要素が2秒かけて透明から完全に表示されるフェードインアニメーションを実装しています。

.fade-in {
  animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

このコードでは、fadeInというアニメーションが2秒でease-in-outの進行速度で再生されます。

各サブプロパティの詳細

@keyframesでアニメーションを定義する

@keyframesはアニメーションの動きを定義するためのルールセットです。アニメーションの各ステップでどのようにスタイルが変化するかを指定します。

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

上記の例では、要素が左からスライドインするアニメーションを定義しています。

animation-duration（持続時間）

animation-durationはアニメーションの再生時間を指定します。例として、アニメーションを3秒間再生する設定です。

.animation-duration {
  animation-name: slideIn;
  animation-duration: 3s;
}

animation-timing-function（タイミング関数）

タイミング関数は、アニメーションの進行速度をコントロールします。主な値は以下の通りです。

  • ease: 開始と終了をゆっくりにし、中間を速くする。
  • linear: 均一な速度で進行する。
  • ease-in: 開始がゆっくりで、その後に速度が増す。
  • ease-out: 終了がゆっくり。
  • ease-in-out: 開始と終了がゆっくり。
.timing-function {
  animation: slideIn 2s ease-out;
}

animation-delay（遅延時間）

animation-delayはアニメーションが開始するまでの遅延時間を指定します。例えば、アニメーションを1秒遅らせて開始するには以下のように設定します。

.animation-delay {
  animation: slideIn 2s ease 1s;
}

animation-iteration-count（回数）

アニメーションを繰り返す回数を指定します。infiniteを設定すると無限に繰り返します。

.iteration-count {
  animation: slideIn 2s ease-in-out infinite;
}

animation-direction（再生方向）

animation-directionはアニメーションの再生方向を指定します。

  • normal: 通常の順序で再生。
  • reverse: 逆方向に再生。
  • alternate: 順方向と逆方向を交互に再生。
  • alternate-reverse: 逆方向から開始して交互に再生。
.alternate-animation {
  animation: slideIn 2s ease-in-out infinite alternate;
}

応用例

バウンスアニメーション

要素が上下に弾むようなバウンスアニメーションです。

.bounce {
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

回転アニメーション

要素が回転するアニメーションを作成します。

.rotate {
  animation: rotate 3s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

グラデーションを使った背景の色変更

背景のグラデーションをアニメーションさせて、色が徐々に変わる効果を作ります。

.gradient-animation {
  animation: gradientShift 5s ease-in-out infinite alternate;
  background: linear-gradient(45deg, #ff6f61, #6b5b95);
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

まとめ

CSSのanimationプロパティは、ウェブデザインに動きや視覚的な効果を簡単に追加できる強力なツールです。基本的なフェードインやスライドインから、複雑なアニメーションまで、animationの設定次第で多彩な表現が可能になります。デザインの意図やユーザー体験を考慮し、適切にアニメーションを活用することで、より魅力的でインタラクティブなウェブサイトを構築しましょう。

参照:

animation - `CSS`（MDN Web Docs）