【初心者向け】CSSアニメーションの作り方｜transitionとkeyframesでWebサイトに動きをつけよう

Webサイトに動きがあって、思わず見入ってしまった経験はありませんか？「でも、アニメーションって難しそう…」「JavaScriptが必要なんでしょ？」と思っていませんか？

実は、CSSだけでも驚くほど魅力的なアニメーションを実装できるんです！このページでは、CSSアニメーションの基本である transition と keyframes を初心者の方にも分かりやすく解説します。

この記事を読めば、ホバーエフェクトからローディングアニメーションまで、JavaScriptを使わずに手軽にWebサイトに動きを加えられるようになります。さらに、パフォーマンスに配慮した実装のコツもお伝えするので、あなたのWebデザインがワンランクアップすること間違いなしです。さあ、一緒にCSSアニメーションの世界を探求しましょう！

transitionとは？ CSSアニメーションの基本

transition は、CSSプロパティの値が変化する際に、その変化を滑らかにアニメーションさせるための機能です。例えば、ボタンにマウスを乗せたときに色が変わる、といった単純な動きを、一瞬で切り替わるのではなく、ゆっくりと変化させることで、ユーザーに心地よい視覚効果を提供できます。JavaScriptを使わずにCSSだけで手軽にアニメーションを実装できるため、Webサイトのインタラクティブ性を高める上で非常に便利な機能です。

transitionのプロパティ解説

transition プロパティは、複数のサブプロパティを組み合わせて使用しますが、一括指定することも可能です。ここでは、主要なサブプロパティとその役割を解説します。

• transition-property: どのCSSプロパティをアニメーションさせるかを指定します。background-color、width、opacity など、アニメーションさせたいプロパティ名を指定します。複数のプロパティをアニメーションさせたい場合は、カンマで区切って指定します。すべてのプロパティを対象とする場合は all と指定します。
• transition-duration: アニメーションにかかる時間を指定します。単位は秒（s）またはミリ秒（ms）で指定します。例えば、0.3s は0.3秒、300ms は300ミリ秒です。この値が小さいほどアニメーションは速く、大きいほどゆっくりになります。
• transition-timing-function: アニメーションの変化の仕方を指定します。時間の経過とともにどのように変化するかのパターンを設定します。
  • ease (デフォルト): 始まりと終わりがゆっくりで、中間が速い。
  • linear: 最初から最後まで同じ速度。
  • ease-in: ゆっくり始まり、徐々に速くなる。
  • ease-out: 速く始まり、徐々にゆっくりになる。
  • ease-in-out: 始まりと終わりがゆっくりで、中間が速い（easeに似ているが、より顕著）。
  • cubic-bezier(): 独自の速度曲線を細かく指定できます。
• transition-delay: アニメーションが開始するまでの遅延時間を指定します。単位は s または ms で指定します。例えば、0.5s と指定すると、プロパティが変化してから0.5秒後にアニメーションが開始します。

これらのプロパティは、まとめて transition ショートハンドプロパティとして記述することもできます。

/* 個別に指定する場合 */
.element {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

/* ショートハンドで指定する場合 */
.element {
  transition: background-color 0.3s ease-out 0s;
  /* または、delayが0sの場合は省略可能 */
  transition: background-color 0.3s ease-out;
}

transitionを使った簡単なアニメーション例（ホバーエフェクト）

transition を使うと、ユーザーが要素にマウスカーソルを合わせたとき（ホバー時）に、色やサイズ、透明度などを滑らかに変化させるエフェクトを簡単に実装できます。ここでは、ボタンの背景色とテキストの色を変化させるシンプルなホバーエフェクトの例を見てみましょう。

HTML:

<button class="my-button">ホバーしてみてね</button>

CSS:

.my-button {
  background-color: #007bff; /* 通常時の背景色 */
  color: #ffffff; /* 通常時の文字色 */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  
  /* ここがポイント！ */
  /* background-colorとcolorの変化を0.3秒かけてeaseでアニメーションさせる */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.my-button:hover {
  background-color: #0056b3; /* ホバー時の背景色 */
  color: #e0e0e0; /* ホバー時の文字色 */
}

このコードでは、.my-button に transition: background-color 0.3s ease, color 0.3s ease; を指定しています。これにより、background-color と color の両方のプロパティが、ホバー時に 0.3秒 かけて ease の速度で滑らかに変化するようになります。

このように、transition を使えば、たった数行のCSSでユーザー体験を向上させる魅力的な動きを手軽に実現できます。

keyframesとは？ より複雑なアニメーションを作成

transition は要素の状態変化にアニメーションを適用する際に便利ですが、より複雑で連続的な動きや、複数のプロパティを段階的に変化させたい場合には keyframes が非常に強力です。keyframes を使うと、アニメーションの開始から終了までの間に、特定のタイミングで要素のスタイルをどのように変化させるかを細かく定義できます。

keyframesの基本構文

keyframes を使用するには、まず @keyframes ルールを使ってアニメーションの動きを定義し、その後 animation プロパティを使ってそのアニメーションを要素に適用します。

@keyframes ルールの基本構文は以下の通りです。

@keyframes アニメーション名 {
  from { /* アニメーション開始時のスタイル */ }
  to { /* アニメーション終了時のスタイル */ }
}

または、パーセンテージを使ってより細かくアニメーションの進行を定義できます。

@keyframes アニメーション名 {
  0% { /* アニメーション開始時（0%）のスタイル */ }
  50% { /* アニメーション中間点（50%）のスタイル */ }
  100% { /* アニメーション終了時（100%）のスタイル */ }
}

アニメーションを要素に適用するには、animation プロパティを使用します。animation は複数のアニメーション関連プロパティを一括で指定できるショートハンドプロパティです。

• animation-name: 適用する @keyframes の名前
• animation-duration: アニメーションの再生時間
• animation-timing-function: アニメーションの変化の速さ（ease, linear, ease-inなど）
• animation-delay: アニメーション開始までの遅延時間
• animation-iteration-count: アニメーションの繰り返し回数（infiniteで無限ループ）
• animation-direction: アニメーションの再生方向（normal, reverse, alternateなど）
• animation-fill-mode: アニメーション終了後のスタイル（forwards, backwards, bothなど）

これらのプロパティを個別に指定することもできますが、animation ショートハンドを使うとより簡潔に記述できます。

.element {
  animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
}

keyframesを使ったアニメーション例（ローディングアニメーション、要素の移動）

keyframes を使うと、複雑な動きもCSSだけで表現できます。ここでは、ローディングアニメーションと要素の移動アニメーションの例を見てみましょう。

ローディングアニメーション（回転するスピナー）

Webサイトの読み込み中によく見かける、くるくる回るスピナーをCSSで作成します。

<div class="loader"></div>

@keyframes spin {
  0% {
    transform: rotate(0deg); /* 開始時は0度 */
  }
  100% {
    transform: rotate(360deg); /* 終了時は360度回転 */
  }
}

.loader {
  border: 4px solid #f3f3f3; /* 薄い灰色の境界線 */
  border-top: 4px solid #3498db; /* 青い境界線（上部） */
  border-radius: 50%; /* 円形にする */
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* 1秒で線形に無限回転 */
}

このコードでは、spin という名前の keyframes で要素を0度から360度まで回転させています。.loader クラスに animation: spin 1s linear infinite; を適用することで、1秒かけて線形に無限に回転するローディングスピナーが完成します。

要素の移動アニメーション

次に、要素が左右に移動するアニメーションを作成します。

<div class="box"></div>

@keyframes slide {
  0% {
    transform: translateX(0); /* 開始位置 */
  }
  50% {
    transform: translateX(100px); /* 50%の時点で右に100px移動 */
  }
  100% {
    transform: translateX(0); /* 終了位置（元の場所に戻る） */
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  animation: slide 2s ease-in-out infinite alternate; /* 2秒で往復移動 */
}

slide という keyframes では、translateX を使って要素を左右に移動させています。animation-direction: alternate; を指定することで、アニメーションが終了すると逆方向に再生され、要素が行ったり来たりする動きになります。ease-in-out を使うことで、動きの始まりと終わりが滑らかになります。

よく使われるCSSアニメーションの種類と実装例

CSSアニメーションの基本であるtransitionとkeyframesを理解したところで、実際にWebサイトでよく使われるアニメーションの種類と、その実装例を見ていきましょう。これらのアニメーションを組み合わせることで、より豊かな表現が可能になります。

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

フェードイン・フェードアウトは、要素をゆっくりと表示させたり、非表示にしたりするアニメーションです。opacityプロパティを変化させることで実現できます。

<style>
  .fade-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    opacity: 0; /* 最初は非表示 */
    transition: opacity 1s ease-in-out; /* 1秒かけて透明度を変化 */
  }

  /* ホバー時にフェードイン */
  .fade-box:hover {
    opacity: 1;
  }

  /* keyframesを使ったフェードイン */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .fade-in-element {
    width: 100px;
    height: 100px;
    background-color: #2ecc71;
    animation: fadeIn 2s forwards; /* 2秒かけてフェードイン、終了状態を維持 */
  }
</style>

<div class="fade-box"></div>
<div class="fade-in-element"></div>

上記の例では、.fade-boxはホバー時にフェードインし、.fade-in-elementはページ読み込み後に自動でフェードインします。

スライドイン・スライドアウト

スライドイン・スライドアウトは、要素を特定の方向から滑り込ませたり、滑り出させたりするアニメーションです。transformプロパティのtranslateを使うことで実現できます。

<style>
  .slide-box {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    transform: translateX(-100%); /* 最初は左に隠す */
    transition: transform 0.8s ease-out;
  }

  /* ホバー時にスライドイン */
  .slide-box:hover {
    transform: translateX(0); /* 元の位置に戻す */
  }

  /* keyframesを使った下からスライドイン */
  @keyframes slideInUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .slide-in-element {
    width: 100px;
    height: 100px;
    background-color: #f39c12;
    animation: slideInUp 1s forwards;
  }
</style>

<div class="slide-box"></div>
<div class="slide-in-element"></div>

translateX()はX軸（横方向）、translateY()はY軸（縦方向）に要素を移動させます。

回転・拡大縮小

回転（rotate）や拡大縮小（scale）も、transformプロパティを使って実装できる代表的なアニメーションです。要素に動きと奥行きを与えることができます。

<style>
  .rotate-box {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    transition: transform 0.6s ease;
  }

  /* ホバー時に回転 */
  .rotate-box:hover {
    transform: rotate(360deg); /* 360度回転 */
  }

  .scale-box {
    width: 100px;
    height: 100px;
    background-color: #1abc9c;
    transition: transform 0.5s ease;
  }

  /* ホバー時に拡大 */
  .scale-box:hover {
    transform: scale(1.2); /* 1.2倍に拡大 */
  }

  /* keyframesを使った連続回転 */
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .spinning-element {
    width: 50px;
    height: 50px;
    background-color: #e67e22;
    border-radius: 50%;
    animation: spin 2s linear infinite; /* 2秒で無限に回転 */
  }
</style>

<div class="rotate-box"></div>
<div class="scale-box"></div>
<div class="spinning-element"></div>

rotate()の引数には角度（deg）を指定し、scale()の引数には拡大・縮小率を指定します。

その他の応用例

上記以外にも、CSSアニメーションを使えば様々な表現が可能です。以下にいくつかのアイデアと、実装のヒントをご紹介します。

• バウンドアニメーション: 要素が跳ねるような動き。keyframesでtranslateYを使い、ease-outやcubic-bezierで加速・減速を調整すると、よりリアルな跳ね返りを表現できます。
• 脈動（パルス）アニメーション: 要素が周期的に拡大・縮小して心臓の鼓動のような効果を出す。keyframesでscaleとopacityを組み合わせ、infiniteで無限に繰り返します。
• シェイクアニメーション: エラーメッセージ表示時などに、要素を小刻みに揺らす。keyframesでtranslateXやrotateを短い間隔で複数回指定します。
• 3Dフリップ: 要素が裏返るような動き。transform-style: preserve-3d;とtransform: rotateY(180deg);などを組み合わせて使います。
• ドロップシャドウの強調: ホバー時にbox-shadowの値を変化させることで、要素が浮き上がったような効果を出せます。

これらのアニメーションは、transitionとkeyframesの組み合わせ、そしてtransformやopacityといったプロパティの応用で実現できます。目的に合わせてプロパティやタイミングを調整し、試行錯誤しながら理想のアニメーションを作り上げてみましょう。

初心者でも簡単！コピペで使えるCSSアニメーションコード集

これまでの解説で、transition と keyframes を使ったCSSアニメーションの基本を理解できたことと思います。ここでは、Webサイトでよく使われるアニメーションを、すぐにコピペで使える形でご紹介します。これらのコードを参考に、あなたのサイトに動きを加えてみましょう。

1. ホバーでボタンが少し浮き上がるアニメーション

ボタンにマウスを乗せたときに、わずかに上に移動して影が濃くなることで、クリックできることを視覚的にアピールするアニメーションです。

<button class="hover-effect-btn">ホバーで浮き上がるボタン</button>

.hover-effect-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* transformとbox-shadowをアニメーション */
}

.hover-effect-btn:hover {
  transform: translateY(-3px); /* 上に3px移動 */
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2); /* 影を濃くする */
}

2. 要素が下からフェードインするアニメーション

ページをスクロールして要素が表示されたときに、下からふわっと現れるアニメーションです。これはkeyframesを使って作成します。

<div class="fade-in-box">
  <p>このボックスは下からフェードインします。</p>
</div>

.fade-in-box {
  width: 200px;
  height: 150px;
  background-color: #28a745;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  opacity: 0; /* 初期状態では非表示 */
  transform: translateY(20px); /* 初期状態では少し下に配置 */
  animation: fadeInFromBottom 1s ease-out forwards; /* アニメーション適用 */
}

@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px); /* 下から20pxの位置 */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 元の位置 */
  }
}

3. 回転するローディングアイコン

コンテンツの読み込み中などに表示される、シンプルな回転アニメーションです。

<div class="loading-spinner"></div>

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* 薄いグレーの枠線 */
  border-top: 5px solid #007bff; /* 青い上の枠線 */
  border-radius: 50%; /* 円形にする */
  animation: spin 1s linear infinite; /* 1秒で1周、無限に繰り返す */
  margin: 50px auto;
}

@keyframes spin {
  from {
    transform: rotate(0deg); /* 0度から開始 */
  }
  to {
    transform: rotate(360deg); /* 360度まで回転 */
  }
}

これらのコードは基本的なものですが、色や速度、タイミングなどを調整することで、さまざまなバリエーションを生み出すことができます。ぜひ、ご自身のWebサイトで試してみてください。

CSSアニメーション作成を助けるツール＆ライブラリ

CSSアニメーションは手書きでも実装できますが、より効率的に、そして高品質なアニメーションを作成するためには、便利なツールやライブラリを活用するのがおすすめです。ここでは、アニメーション作成をサポートしてくれるツールと、手軽に導入できるライブラリをご紹介します。

おすすめツール

アニメーションの動きを視覚的に作成・調整できるオンラインツールや、開発を効率化するエディタ拡張機能などを活用することで、コードを書く手間を省き、試行錯誤の時間を短縮できます。

• Keyframes.app CSSの@keyframesルールを視覚的に生成できるオンラインツールです。アニメーションの開始から終了までの各ステップ（%）をGUIで設定し、リアルタイムでプレビューしながら調整できます。複雑なアニメーションも直感的に作成できるため、時間短縮に繋がります。
• CSS Gradient Animator グラデーションのアニメーションを簡単に作成できるツールです。CSSのbackground-imageプロパティを使ったグラデーションの変化を、開始色と終了色、アニメーション時間などを指定するだけで生成してくれます。
• CodePen / JSFiddle これらは厳密にはアニメーション作成ツールというよりも、コードを書いてすぐに実行・共有できるオンラインエディタです。CSSアニメーションのコードを試したり、他の人のコードを参考にしたりする際に非常に便利です。

おすすめライブラリ

手軽に導入できるライブラリを使えば、自分で複雑なコードを書かなくても、プロフェッショナルなアニメーションを簡単に実装できます。

• Animate.css 最も有名で手軽に使えるCSSアニメーションライブラリの一つです。クラスを追加するだけで、フェードイン、スライド、バウンス、回転など、豊富な種類のアニメーションを簡単に適用できます。Webサイトにちょっとした動きを加えたい場合に非常に便利です。CDNで読み込むか、npmでインストールして使用します。
• WOW.js Animate.cssと組み合わせて使うことで、要素がビューポートに入ったときにアニメーションを実行できるライブラリです。スクロールに応じてアニメーションをトリガーしたい場合に重宝します。
• AOS (Animate On Scroll Library) こちらもWOW.jsと同様に、スクロールに応じてアニメーションをトリガーするライブラリです。より多くのカスタマイズオプションがあり、洗練されたスクロールアニメーションを実装できます。
• GSAP (GreenSock Animation Platform) CSSアニメーションの範疇を超え、JavaScriptでより高度なアニメーション制御を可能にする強力なライブラリです。CSSプロパティだけでなく、SVGやCanvasなど、あらゆる要素を滑らかにアニメーションさせることができます。CSSだけでは実現が難しい複雑なシーケンスアニメーションやインタラクションを実装したい場合に検討すると良いでしょう。

パフォーマンスを考慮したCSSアニメーション実装のポイント

魅力的なCSSアニメーションは、ユーザー体験を向上させる強力なツールですが、実装方法によってはWebサイトのパフォーマンスを低下させてしまう可能性があります。特にスマートフォンなど、処理能力が限られたデバイスでは、アニメーションがカクついたり、ページの読み込みが遅くなったりすることも。ここでは、アニメーションが重くなる原因と、パフォーマンスを最適化するための具体的なコツをご紹介します。

アニメーションが重くなる原因

CSSアニメーションが重くなる主な原因は、ブラウザがアニメーションの各フレームを描画する際に発生する「リフロー（Reflow）」と「再描画（Repaint）」という処理にあります。

• リフロー（Reflow）: 要素のサイズや位置が変更された際に、ブラウザがその要素だけでなく、関連する他の要素も含めてレイアウトを再計算する処理です。width、height、top、left、margin、padding などのプロパティをアニメーションさせると、リフローが頻繁に発生し、非常に高い負荷がかかります。
• 再描画（Repaint）: 要素の見た目（色や背景など）が変更された際に、ブラウザがその部分だけを再描画する処理です。リフローよりは負荷が低いですが、頻繁に発生するとパフォーマンスに影響を与えます。

これらの処理は、特にアニメーションが高速で動いたり、多数の要素に適用されたりする場合に、ブラウザに大きな負担をかけ、結果としてアニメーションが滑らかに表示されなくなります。

パフォーマンスを最適化するコツ

CSSアニメーションのパフォーマンスを最大限に引き出すためには、ブラウザの描画負荷を最小限に抑えることが重要です。以下のコツを実践してみましょう。

• transform と opacity プロパティを活用する: transform（移動、回転、拡大縮小など）と opacity（透明度）は、ブラウザがリフローや再描画を伴わずに、GPU（グラフィック処理装置）を使って高速に処理できるプロパティです。これらを積極的に利用することで、滑らかなアニメーションを実現できます。例えば、要素の移動には top や left ではなく transform: translate() を使いましょう。
• will-change プロパティを適切に利用する: will-change プロパティは、要素が将来的に変更される可能性のあるプロパティをブラウザに事前に伝えることで、ブラウザが最適化を行うためのヒントを与えます。これにより、アニメーション開始時のパフォーマンスを向上させることができます。ただし、乱用すると逆にメモリを消費してしまうため、本当にアニメーションする要素にのみ適用し、アニメーションが終了したら削除するなどの配慮が必要です。
• ハードウェアアクセラレーションを有効にする: transform: translateZ(0) や backface-visibility: hidden などのプロパティを適用することで、ブラウザにGPUを使った描画（ハードウェアアクセラレーション）を促すことができます。これにより、より滑らかなアニメーションが期待できます。
• アニメーションの簡潔な設計: 複雑すぎるアニメーションや、同時に多数の要素をアニメーションさせることは避けましょう。シンプルで意図が明確なアニメーションは、パフォーマンス面でも優れています。
• プロパティの数を最小限に抑える: アニメーションさせるCSSプロパティの数は、必要最低限に絞りましょう。多くのプロパティを同時にアニメーションさせると、それだけブラウザの処理負荷が増大します。

これらのポイントを意識することで、見た目の美しさとWebサイトの快適さの両立を実現するCSSアニメーションを作成できます。

まとめ：CSSアニメーションでWebサイトを魅力的にしよう

この記事では、CSSアニメーションの基本から応用、そしてパフォーマンス最適化のコツまで幅広く解説してきました。transitionとkeyframesという2つの強力なプロパティを使いこなすことで、JavaScriptに頼ることなく、Webサイトに魅力的な動きを加えることができることをご理解いただけたかと思います。

CSSアニメーションは、単に見た目を華やかにするだけでなく、ユーザーの視線を誘導したり、操作に対するフィードバックを与えたりと、ユーザー体験（UX）を向上させる上で非常に重要な役割を果たします。

今回ご紹介した具体的なコード例やツール、ライブラリを活用し、ぜひご自身のWebサイトやアプリケーションに動きを取り入れてみてください。最初は簡単なホバーエフェクトからでも構いません。一つずつ試していくうちに、きっとCSSアニメーションの楽しさと奥深さに触れることができるでしょう。

パフォーマンスに配慮しつつ、効果的なCSSアニメーションを実装して、ユーザーを惹きつける魅力的なWebコンテンツを制作しましょう。