プログラミング

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

最終更新： 16/03/2025
1 分の読み

CSSを使用してアニメーションを作成する方法について、完全かつ包括的に解説します。このガイドでは、CSSの基本から高度な技法までをカバーし、実際のコードサンプルを使って、どのようにアニメーションを実装するかを学んでいきます。

1. CSSアニメーションの基本

CSSアニメーションは、Webページ上の要素のプロパティを時間の経過とともに変化させるための手法です。これを実現するためには、以下の2つの主要なプロパティを使用します。

関連記事
  • @keyframes: アニメーションの設定を定義するためのルールセット。
  • animation: アニメーションを実際に適用するプロパティ。

例:

以下は簡単なアニメーションを作成する例です。

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

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s ease-in-out infinite;
}

この例では、.boxというクラスを持つ要素に対して、slideという名前のアニメーションを2秒かけて横に300px移動させるアニメーションを設定しています。ease-in-outはアニメーションの速度を滑らかにするタイミング関数です。また、infiniteはアニメーションを無限に繰り返すことを意味します。

2. @keyframes の詳細

@keyframes は、アニメーションの中でプロパティがどのように変化するかを定義します。0% から 100% まで、アニメーションがどの状態からどの状態に変わるかを記述します。重要なのは、アニメーションが始まる時点（0%）と終わる時点（100%）だけではなく、途中の段階（例えば、50%）を追加して、より細かい制御を行うこともできる点です。

例:

css
@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: colorChange 3s ease-in-out infinite;
}

このコードでは、.boxが最初に赤から黄色、そして緑に変わるアニメーションを3秒で繰り返すようになっています。

3. animation プロパティの詳細

animation プロパティは、実際にアニメーションを適用するために使用されます。animation プロパティで指定できる値は以下の通りです。

  • animation-name: 使用する@keyframesの名前。
  • animation-duration: アニメーションの持続時間。単位は秒（s）またはミリ秒（ms）。
  • animation-timing-function: アニメーションの速度を調整するタイミング関数（ease, linear, ease-in, ease-out, ease-in-outなど）。
  • animation-iteration-count: アニメーションの繰り返し回数。infiniteを指定すると無限に繰り返します。
  • animation-direction: アニメーションが順方向または逆方向で再生されるかを設定します（normal, reverse, alternate, alternate-reverseなど）。
  • animation-fill-mode: アニメーションの終了後の状態を設定します（none, forwards, backwards, bothなど）。

例:

css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 2s ease-in-out infinite, colorChange 3s linear infinite;
}

ここでは、.boxが2秒で横移動し、さらに3秒で色が変わるアニメーションが並行して実行されます。

4. 高度なアニメーション技法

4.1. トランジションとの組み合わせ

CSSアニメーションは、transitionと組み合わせることで、より直感的でダイナミックな効果を作成できます。transitionは、要素の状態が変化したときにアニメーションを発生させるプロパティです。

css
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}

.box:hover {
  transform: translateX(200px);
}

このコードでは、.boxにマウスホバーすると、1秒かけて横に200px移動します。

4.2. 多段階アニメーション

複数のアニメーションを組み合わせて、複雑な動きを作成することもできます。例えば、要素が最初に移動し、次に回転し、最後に色を変えるような複雑なアニメーションです。

css
@keyframes complexAnimation {
  0% {
    transform: translateX(0) rotate(0deg);
    background-color: red;
  }
  50% {
    transform: translateX(100px) rotate(180deg);
    background-color: yellow;
  }
  100% {
    transform: translateX(200px) rotate(360deg);
    background-color: green;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: complexAnimation 3s ease-in-out infinite;
}

5. まとめ

CSSアニメーションは、Webデザインにダイナミズムを加える強力なツールです。@keyframesを使ってアニメーションの動きを定義し、animationプロパティを使用してそれを適用します。また、transitionとの組み合わせや複雑な多段階アニメーションによって、インタラクティブで魅力的なユーザー体験を提供できます。

上記の技法を駆使することで、静的なページから動きのあるインタラクティブなWebページへと進化させることができます。

最終更新： 16/03/2025
1 分の読み
Back to top button