CSSアニメーション徹底解説｜@keyframes の基本から応用まで

@keyframes とは？

@keyframes は、CSS でアニメーションを作成する際に使用する規則です。アニメーションの進行状態に応じて、特定のプロパティをどのように変化させるかを指定できます。

例えば、要素の位置、色、サイズ、透明度などを時間とともに変化させることができます。

@keyframes の基本構文

@keyframes の基本的な構文は以下の通りです：

@keyframes アニメーション名 {
  0% { プロパティ: 値; }
  50% { プロパティ: 値; }
  100% { プロパティ: 値; }
}

0%: アニメーションの開始時点を示します。
50%: アニメーション進行の途中（例: 中間点）を示します。
100%: アニメーションの終了時点を示します。

@keyframes を使った具体例

簡単な例: 色の変化

以下は、背景色を変化させるアニメーションの例です。

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

.box {
  width: 100px;
  height: 100px;
  animation: changeColor 3s infinite;
}

animation プロパティ: このプロパティでアニメーションを適用します。

• 3s: アニメーションの時間（3秒）。
• infinite: アニメーションを無限ループさせる。

ステップごとの変化: 複数の中間点

@keyframes では、必要に応じて任意の割合で中間点を指定できます。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(50px);
  }
  50% {
    transform: translateX(100px);
  }
  75% {
    transform: translateX(150px);
  }
  100% {
    transform: translateX(200px);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  animation: moveBox 4s ease-in-out infinite;
}

CSSアニメーションと @keyframes の組み合わせ

@keyframes を使う際には、animation プロパティで詳細な設定を行います。主なプロパティは以下の通りです：

• animation-name: アニメーション名を指定。
• animation-duration: アニメーションの再生時間を設定。
• animation-timing-function: アニメーションの速度変化を指定。
• animation-delay: アニメーション開始の遅延時間を指定。
• animation-iteration-count: 再生回数を指定。
• animation-direction: アニメーションの方向を指定（例: alternate）。

例: すべてのプロパティを適用

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation: scaleUp 2s ease-in 1s 3 alternate;
}

2s: 再生時間。
ease-in: スムーズな開始。
1s: 1秒遅延。
3: 再生回数。
alternate: 再生時に逆再生を繰り返す。

実践的な例: ボタンのホバーアニメーション

以下は、ボタンにホバー時のアニメーションを追加する例です。

@keyframes hoverShadow {
  0% {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  }
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  animation: hoverShadow 0.5s ease-in-out infinite alternate;
}

1. animation-direction（アニメーションの方向）

animation-direction は、アニメーションの再生方向を設定するプロパティです。以下のような値を指定できます：

例: animation-direction の使い方

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: orange;
  animation: bounce 2s ease-in-out infinite alternate;
}

• alternate の指定により、アニメーションが上昇（0% → 50%）と下降（50% → 100%）を繰り返します。

2. animation-iteration-count（再生回数の指定）

animation-iteration-count は、アニメーションの再生回数を指定するプロパティです。以下の値を設定できます：

例: animation-iteration-count の使い方

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: fadeInOut 2s linear 3;
}

• 上記の例では、アニメーションが 3 回再生された後に停止します。

3. animation-timing-function（速度変化の指定）

アニメーションの速度変化を制御するプロパティです。以下の値を指定できます：

例: timing-function の使い方

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

.box {
  width: 200px;
  height: 50px;
  background-color: lightgreen;
  animation: slideIn 3s ease-in-out infinite;
}

4. animation-fill-mode（アニメーション終了後の状態）

アニメーションが終了した後、要素の状態を制御します。

例: fill-mode の使い方

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  animation: grow 2s forwards;
}

5. animation-delay（アニメーションの遅延）

アニメーションの開始を遅らせる時間を指定します。

例: animation-delay の使い方

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

.box {
  width: 50px;
  height: 50px;
  background-color: lightcoral;
  animation: spin 2s linear infinite;
  animation-delay: 1s;
}

組み合わせた例

最後に、上記すべてを組み合わせた例を示します：

@keyframes complexAnimation {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-50px) scale(1.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

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

この例では、ボックスが上下に移動しながらサイズを変化させ、スムーズに繰り返し動きます。

まとめ

CSS の @keyframes と animation プロパティは非常に柔軟で、Web ページに動きを加えるのに役立ちます。今回解説した選択肢を組み合わせることで、より魅力的なアニメーションを実現できます。