【CSS初心者向け】@keyframesとは？アニメーションの作り方を基礎から解説

「Webサイトに動きをつけたいけど、JavaScriptは難しそう…」 「CSSでアニメーションを作れるって聞いたけど、どうやるの？」

そんな疑問を持つ方に朗報です。CSSの**@keyframes（キーフレーム）**を使えば、JavaScriptなしで本格的なアニメーションを実装できます。

この記事では、CSS初心者の方でも理解できるよう、@keyframesの基礎から実践的な使い方まで、わかりやすく解説します。

@keyframesとは？

@keyframes（キーフレーム）とは、CSSアニメーションの動きを段階的に指定するための機能です。

簡単に言えば、「アニメーションの設計図」のようなもの。開始から終了までの間に、どのタイミングでどんな状態にするかを細かく指定できます。

アニメーションとの違い

• @keyframes：アニメーションの動き方を定義する（設計図）
• animation：定義したアニメーションを要素に適用する（実行）

この2つをセットで使うことで、動きのあるWebサイトを作れます。

@keyframesでできること

@keyframesを使うと、以下のような表現が可能になります。

• フェードイン・フェードアウト
• スライド表示
• 回転・拡大・縮小
• 色の変化
• 複雑な動きの組み合わせ

Facebookの「いいね！」ボタンのアニメーションや、ローディング画面のスピナーなど、多くのWebサイトで使われている技術です。

@keyframesの基本的な書き方

@keyframesは、2つのステップで実装します。

ステップ1：アニメーションを定義する

まず、@keyframesでアニメーションの動きを定義します。

@keyframes アニメーション名 {
  0% {
    /* 開始時の状態 */
  }
  100% {
    /* 終了時の状態 */
  }
}

書き方のポイント

• アニメーション名は自由に決められます（英数字とハイフン）
• 0%が開始、100%が終了を表します
• %の間に中間の状態を追加できます

ステップ2：要素に適用する

定義したアニメーションを、HTML要素に適用します。

.要素 {
  animation: アニメーション名 実行時間;
}

最もシンプルな例：フェードイン

/* アニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
  }
  100% {
    opacity: 1; /* 不透明 */
  }
}

/* 要素に適用 */
.box {
  animation: fadeIn 2s; /* 2秒かけてフェードイン */
}

この例では、要素が2秒かけて透明から不透明に変化します。

fromとtoを使った書き方

開始と終了だけを指定する場合は、fromとtoを使うこともできます。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

fromは0%、toは100%と同じ意味です。

複数の段階を指定する

0%と100%の間に、中間の状態を追加できます。

@keyframes bounce {
  0% {
    transform: translateY(0); /* 元の位置 */
  }
  50% {
    transform: translateY(-50px); /* 上に50px移動 */
  }
  100% {
    transform: translateY(0); /* 元の位置に戻る */
  }
}

.ball {
  animation: bounce 1s;
}

この例では、ボールが上に跳ねて戻ってくるアニメーションになります。

複数のプロパティを同時に変化させる

@keyframes slideAndFade {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

位置と透明度を同時に変化させることで、より複雑な表現が可能です。

animationプロパティの詳細設定

animationプロパティには、様々な設定を追加できます。

主要な設定項目

.element {
  animation-name: fadeIn;              /* アニメーション名 */
  animation-duration: 2s;              /* 実行時間 */
  animation-timing-function: ease;     /* 速度曲線 */
  animation-delay: 0.5s;               /* 開始前の待ち時間 */
  animation-iteration-count: 3;        /* 繰り返し回数 */
  animation-direction: normal;         /* 再生方向 */
  animation-fill-mode: forwards;       /* 終了後の状態 */
}

ショートハンドで書く

上記をまとめて1行で書くこともできます。

.element {
  animation: fadeIn 2s ease 0.5s 3 normal forwards;
}

各プロパティの詳細

animation-duration（実行時間）

• 2s：2秒
• 500ms：500ミリ秒

animation-timing-function（速度曲線）

• linear：一定の速度
• ease：ゆっくり始まり、速くなり、ゆっくり終わる（デフォルト）
• ease-in：ゆっくり始まる
• ease-out：ゆっくり終わる
• ease-in-out：ゆっくり始まり、ゆっくり終わる

animation-iteration-count（繰り返し回数）

• 1：1回だけ（デフォルト）
• 3：3回繰り返す
• infinite：無限に繰り返す

animation-direction（再生方向）

• normal：通常の方向（デフォルト）
• reverse：逆方向
• alternate：往復する
• alternate-reverse：逆方向から往復

animation-fill-mode（終了後の状態）

• none：元の状態に戻る（デフォルト）
• forwards：最後の状態を維持
• backwards：最初の状態で待機
• both：両方の効果

実践的なアニメーション例5選

実際のWebサイトでよく使われるアニメーションを紹介します。

例1：ローディングスピナー

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

用途：データ読み込み中の表示

例2：パルスアニメーション（脈打つ効果）

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

.notification {
  animation: pulse 2s ease-in-out infinite;
}

用途：通知バッジ、注目してほしいボタン

例3：スライドイン（左から右へ）

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.card {
  animation: slideInLeft 0.6s ease-out;
}

用途：メニュー表示、モーダルウィンドウ

例4：バウンスイン（弾むように登場）

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.popup {
  animation: bounceIn 0.5s ease-out;
}

用途：ポップアップ、アラート表示

例5：グラデーション背景のアニメーション

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero {
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

用途：ヒーローセクション、背景装飾

複数のアニメーションを同時に適用

カンマ区切りで、複数のアニメーションを同時に実行できます。

.element {
  animation: 
    fadeIn 1s ease-out,
    slideUp 1s ease-out,
    rotate 2s linear infinite;
}

パフォーマンスを考慮したアニメーション

スムーズなアニメーションのために、以下のプロパティを使うのがおすすめです。

推奨されるプロパティ

• transform（translate, rotate, scale）
• opacity

避けたほうが良いプロパティ

• width, height
• top, left, right, bottom
• margin, padding

理由：transformとopacityはGPUアクセラレーションが効くため、パフォーマンスが良いです。

よくある質問（FAQ）

Q1. JavaScriptとの使い分けは？

A. 単純な繰り返しアニメーションや、ページ読み込み時の演出にはCSSが最適です。ユーザーの操作に応じた複雑な制御が必要な場合はJavaScriptを使いましょう。

Q2. ブラウザ対応状況は？

A. 主要なモダンブラウザすべてに対応しています。古いブラウザでは-webkit-などのベンダープレフィックスが必要な場合があります。

Q3. アニメーションが重くなる原因は？

A. widthやheightなど、レイアウトに影響するプロパティをアニメーションすると重くなります。可能な限りtransformとopacityを使いましょう。

Q4. アニメーションを一時停止できる？

A. できます。animation-play-state: paused;を使います。

.element:hover {
  animation-play-state: paused;
}

Q5. スマホでもスムーズに動く？

A. はい。ただし、複雑すぎるアニメーションや大量の要素を同時にアニメーションさせるとカクつく可能性があります。実機で確認しながら調整しましょう。

まとめ

@keyframesは、CSSだけで本格的なアニメーションを作れる強力な機能です。

この記事のポイント

• @keyframesでアニメーションの動きを定義し、animationで適用
• 0%〜100%の間で、段階的に状態を指定できる
• transform・opacityを使うとパフォーマンスが良い
• ローディング、スライドイン、パルスなど様々な表現が可能

まずは簡単なフェードインから試してみて、徐々に複雑なアニメーションに挑戦していくのがおすすめです。