Web制作をしていると、「デザインはきれいだけど、なんだか平坦で動きがなく、物足りない」という声を聞いたことはありませんか？

特に最近では、動きのあるウェブサイトが当たり前になりつつあります。スクロールに合わせて要素が現れたり、ボタンが押された瞬間に反応したりすることで、ユーザーに楽しい体験を提供できます。

しかし、こうしたアニメーションを加える方法を知らなければ、せっかくのデザインも印象に残りにくくなってしまいます。

「CSSでアニメーションを簡単に追加できるって聞いたけど、どうやるのかわからない…」「何から手を付けていいのか迷っている…」という方も多いのではないでしょうか？

そこで、今回はCSSのanimationプロパティと@keyframesを使って、初心者でも簡単にウェブサイトに動きを加える方法を解説します。

これを読めば、デザインがただの「静止画」から「動きのある演出」に生まれ変わります！

CSSアニメーションとは？animationプロパティの概要を解説

CSSアニメーションは、ウェブサイトに動きを加えるための強力なツールです。

例えば、ボタンがクリックされるときに色が変わったり、バナー画像がスムーズにスライドしたりするのもCSSアニメーションのおかげです。

アニメーションを作成するには主にanimationプロパティと@keyframesを使用します。

animationプロパティで動きのルールを定義し、@keyframesでその動きを細かく設定するイメージです。

動きの演出は、ユーザーエクスペリエンスを向上させるために重要で、視覚的な楽しさを提供するだけでなく、ユーザーの注意を引きつける効果もあります。

animationプロパティの基本的な使い方

animationプロパティは、アニメーションの名前、持続時間、タイミング、繰り返し回数などを指定します。

animationプロパティでは以下を設定することができます。

• アニメーション名 ← @keyframesで設定
• 再生時間
• イージング
• 繰り返し回数
• 遅延時間
• 再生方向
• フィルモード

.example {
  animation: アニメーション名 再生時間 イージング 繰り返し回数 遅延時間 再生方向 フィルモード;
}

実際に記述すると以下のようになります。

.example {
  animation: move 2s ease-in-out infinite;
}

このコードでは、

• move：アニメーション名←ここをkeyframesで指定
• 2s：アニメーションの時間（2秒）
• ease-in-out：動きの速度（スムーズな加速と減速）
• infinite：アニメーションが無限に繰り返される

という指定をしています。

animationプロパティでは個別プロパティがあり、個別に指定も可能。

animation-name

• アニメーションの名前を指定します。
• 定義した@keyframesの名前をここで使用します。
• 例: animation-name: slideIn;

animation-duration

• アニメーションの再生時間を指定します。
• 単位は秒（s）またはミリ秒（ms）。
• 例: animation-duration: 2s;

animation-timing-function

• 動きの速度（イージング）を指定します。
• 例: ease（デフォルト）, linear, ease-in, ease-out, ease-in-out, cubic-bezier()。
• 例: animation-timing-function: ease-in;

animation-iteration-count

• アニメーションの繰り返し回数を指定します。
• infiniteで無限に再生、数値で特定の回数を設定します。
• 例: animation-iteration-count: infinite;

animation-delay

• アニメーションの開始を遅らせる時間を指定します。
• 単位は秒（s）またはミリ秒（ms）。
• 例: animation-delay: 1s;

animation-direction

• 再生方向を指定します。
• オプション:
  • normal: 通常の再生（デフォルト）。
  • reverse: 逆方向に再生。
  • alternate: 通常方向と逆方向を交互に再生。
  • alternate-reverse: 逆方向から開始し、交互に再生。
• 例: animation-direction: alternate;

animation-fill-mode

• アニメーションの再生前後にスタイルを保持するかどうかを指定します。
• オプション:
  • none: 再生前後はアニメーションの影響なし（デフォルト）。
  • forwards: アニメーション終了後の状態を保持。
  • backwards: 再生前の状態を保持。
  • both: 再生前後両方の状態を保持。
• 例: animation-fill-mode: forwards;

animation-play-state

• アニメーションの再生/一時停止を指定します。
• オプション:
  • running: 再生中（デフォルト）。
  • paused: 一時停止。
• 例: animation-play-state: paused;

.example {
  /* animationプロパティ設定 */
  animation-name: slideInFade; /* アニメーション名 */
  animation-duration: 3s; /* 再生時間 */
  animation-timing-function: ease-in-out; /* イージング */
  animation-iteration-count: 2; /* 繰り返し回数 */
  animation-delay: 1s; /* 遅延時間 */
  animation-direction: alternate; /* 再生方向 */
  animation-fill-mode: both; /* 再生前後のスタイル保持 */
  animation-play-state: running; /* 再生状態 */
}

…1行に書いてしまった方が楽そうですね！

@keyframesで動きを設定する

@keyframesは、アニメーションの動きのステップを定義する場所です。

例えば、以下のコードでは要素を左から右へ移動させます：

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

0%から100%までの間で、transformプロパティを使い、要素がX方向に100px移動するアニメーションを指定しています。

@keyframes内の割合は細かく指定できるため、複雑な動きを表現することも可能です。

実際に使えるアニメーションの事例を解説

事例1）ローディングアニメーションを作成

Webサイトの読み込み中に使えるシンプルなローディングアニメーションの例です

See the Pen CSSLoadingAnimation by WithWhiz (@withwhiz) on CodePen.

以下はコードです。

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

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

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

ここでは@keyframesを使って、円形の要素が360度回転するアニメーションを設定しています。

事例2）要素の色を段階的に変更する

要素の色を3秒で赤→黄→緑に色を変化させるCSSです。

See the Pen KeyFrameBasicChangeColor by WithWhiz (@withwhiz) on CodePen.

以下はコードです

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

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: colorChange 5s infinite;
  }

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

事例3）文字をふわっと表示させるアニメーション

See the Pen Untitled by WithWhiz (@withwhiz) on CodePen.

<h1 class="fade-in">Welcome to my site!</h1>

  .fade-in {
    opacity: 0;
    animation: fadeIn 5s forwards;
  }

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

事例4）応用編：JavaScriptと組み合わせてスクロールで文字をふわっと表示させる

スクロールアニメーションなどのユーザー操作による制御CSSのみでは難しいのでJavaScriptと組み合わせることでUXの幅が広がります。

See the Pen ScrollFadeInJavaScript&CSS by WithWhiz (@withwhiz) on CodePen.

  <div style="height: 100vh;"> <!-- 空白スペース -->
    <p>スクロールしてください。</p>
  </div>

  <div class="fade-in-box">表示されるとふわっと出現します！</div>
  <div class="fade-in-box">この要素もフェードインします！</div>
  <div class="fade-in-box">もうひとつの要素です。</div>

/* 初期状態 */
.fade-in-box {
  height: 60px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 表示時のスタイル */
.fade-in-box.visible {
  opacity: 1;
  transform: translateY(0);
}

document.addEventListener("DOMContentLoaded", () => {
  const fadeInElements = document.querySelectorAll(".fade-in-box");

  const fadeInOnScroll = () => {
    fadeInElements.forEach(element => {
      const rect = element.getBoundingClientRect();
      const isVisible = rect.top < window.innerHeight && rect.bottom >= 0;

      if (isVisible) {
        element.classList.add("visible");
      }
    });
  };

  // 初回チェック（ロード時にすでに表示されている要素に対応）
  fadeInOnScroll();

  // スクロールイベントでチェック
  window.addEventListener("scroll", fadeInOnScroll);
});

CSSアニメーションを活用してWebサイトを魅力的にしよう！

CSSのanimationプロパティと@keyframesを使いこなすことで、Web以下はサイトに動きと魅力を加えることができます。

基本的な動きから複雑なアニメーションまで、あなたのデザインを次のレベルへと引き上げるチャンスです。

まずはシンプルなアニメーションから試してみましょう。

アニメーションを活用して、ユーザーの目を引くデザインを実現してください！