Loading

  • LIGHT

  • DARK

ROUTE

ルートゼロの
アクティビティ

CSSアニメーションとJavaScriptの組み合わせで始める！初心者向けユニークアプローチ10選【コード例あり】

技術情報
2

はじめに

Webサイトやアプリケーションに動きをつけるためには、CSSアニメーションとJavaScriptの組み合わせが非常に有用です。CSSだけで実現できるアニメーションは多いものの、JavaScriptを加えることで、ユーザーアクションに応じた動きや、複雑な条件分岐を含む高度なアニメーションを実装できます。

たとえば、マウスホバー時に回転や拡大が発動したり、ボタンクリック後にローディングを回転させたりなど、インタラクティブな演出を自在に行えるのが最大の魅力です。実際、初めて触れる方は「これほど自由に動かせるのか！」と驚くことも多いのではないでしょうか？

しかし、実際にやってみると、「何から始めればいいのか」「@keyframesってどう書けばいいのか」が分からず、つまずくこともあります。そこで本記事では、初心者から中級者向けに、使い勝手が良く応用範囲が広い10種類のアニメーション手法をピックアップしました。

本記事の構成

本記事は以下のような方を対象としています。

  • HTML/CSSの基本文法はわかる初心者
    「@keyframesの書き方はなんとなく知っているけど、実用的な例が見たい」という方に最適です。

  • JavaScriptをある程度使えるが、アニメーションを作るのに慣れていない中級者
    より高度なアニメーションを取り入れたい方は、ここで紹介する基本形をベースに新しい動きを作るヒントを得られるでしょう。

  • Webデザイナーやディレクター
    デザインや演出の幅を広げたいが、コードまでは詳しくない…という方にも、サンプルを見るだけでアニメーションのイメージを把握できるよう工夫しています。

「初心者でもとにかく動きを入れてみたい」「中級者だけどベースのコードをパパッと見返したい」という方は、「10のユニークなアプローチを徹底解説」、後半に掲載のサンプルコードを実際にコピペして試してみてください。

10のユニークなアプローチを徹底解説

ここでは、CSSアニメーションとJavaScriptを組み合わせたアプローチ例を厳選し、10種類に分けて紹介します。それぞれのアニメーションの特徴とともに、実際の@keyframesのサンプルコードを掲載しています。ぜひ、ブラウザの開発ツールなどで確認しながら使ってみてください。

3-1. バウンド（bounce）

まずは非常にオーソドックスな「バウンド」アニメーションです。要素が上下に弾むように動作し、視覚的な注目を集めるのに向いています。主にボタンやアイコンなど「押してほしい」要素に使うと、ユーザーの目を引きやすいです。

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

  • 使い方のポイント:

    • 速度(animation-duration)を短め（例: 1s）にするとポップな印象、長め（例: 3s）にするとゆったりした印象を与えられます。

    • translateY(-20px) の値を変えるとバウンドの振れ幅が変わるので、要素の大きさやUIデザインに合わせて調整してみましょう。

3-2. 回転（rotate）

要素を回転させる「rotate」は、ローディングアニメーションや、注意喚起したいアイコンをぐるぐる回す際によく使われます。シンプルに360度回すだけでもインパクトがあり、操作が簡単で使い勝手の良いアニメーションです。

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

  • 使い方のポイント:

    • 連続して止まらない動きにしたい場合は、infinite ループで回し続けられます。

    • rotate(360deg) を rotate(180deg)にするなど、途中で止めることで、カードの裏面を見せる簡易アニメーションとしても応用可能です。

3-3. 拡大縮小（scale）

拡大縮小（scale）アニメーションでは、要素を大きくしたり小さくしたりすることで注目を引きます。たとえば、ボタンにホバーしたときだけ拡大してアクティブ感を演出するなど、使えるシーンが幅広い点が魅力です。

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

  • 使い方のポイント:

    • scale(1.5) を scale(1.2) にするだけでも、かなり印象が変わります。

    • あまりに大きくしすぎるとデザインが崩れてしまう場合があるので、程よいサイズ感を意識しましょう。

3-4. スライドイン（slideIn）

要素が画面外からスッと入ってくる「スライドイン」は、ページがロードされたタイミングや、ユーザーがスクロールして要素が見えるようになったときに表示するなど、多彩なシチュエーションで使えます。動きに合わせてフェードも加えると、より自然なアニメーションに仕上がります。

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

  • 使い方のポイント:

    • -100% を 100% に変更すれば右側からスライドインさせることもできます。上下方向（translateY(-100%) など）に応用してみるのもおすすめです。

    • JavaScriptのスクロールイベントと組み合わせれば、ユーザーが特定の位置までスクロールしたら要素がスライドインしてくる、といった動きが簡単に実装可能です。

3-5. フェードイン（fadeIn）

徐々に透明から不透明へ変化する「フェードイン」は、あらゆるアニメーションの基本といっても過言ではありません。シンプルだからこそ汎用性が高く、ほかの動きと組み合わせることで、より洗練された演出を作りやすいのが特徴です。

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

  • 使い方のポイント:

    • ほんの少しだけ上下に移動するアニメーションを加えたい場合は、transform: translateY(10px); opacity: 0; から始めるなど工夫すると、奥行きや軽やかさが演出できます。

    • 他の動きと合わせるときは、タイミング(animation-delay)を変えることで段階的な表示も可能です。

3-6. 横回転（flipX）

3Dアニメーション風に要素がX軸を中心にクルッと回転するのが「flipX」です。カードの裏面を見せるような演出や、前後の情報を入れ替えるUIなどに使われます。ちょっとした動きで意外性を出したいときにも役立ちます。

@keyframes flipX {
  0%, 100% {
    transform: perspective(400px) rotateX(0deg);
  }
  50% {
    transform: perspective(400px) rotateX(180deg);
  }
}

  • 使い方のポイント:

    • perspective(400px) の値を変更すると、回転時の奥行き感が変化します。数値を小さくするとより立体的、大きくすると遠近感がゆるやかになります。

    • ホバー時に発動する場合は、:hover で transform-style: preserve-3d; などを適切に設定するのがポイントです。

3-7. 縦回転（flipY）

「flipX」の縦版である「flipY」は、Y軸を中心に回転します。左右にめくるような動きを演出できるので、ユーザーが横スワイプやドラッグ操作を行うUIにも似合います。

@keyframes flipY {
  0%, 100% {
    transform: perspective(400px) rotateY(0deg);
  }
  50% {
    transform: perspective(400px) rotateY(180deg);
  }
}

  • 使い方のポイント:

    • 「flipX」と同様に、perspective の値で立体感を調整できます。

    • コンテンツを入れ替えるだけでなく、一時的に裏面に「読み込み中…」や「秘密のメッセージ」を出すなど、遊び心あふれる実装にも活用可能です。

3-8. スイング（swing）

軽く振り子のように左右へ揺れる「swing」は、ポップでコミカルな印象を与えるアニメーションです。ボタンやアイコンを注目させたいとき、ちょっとした遊び心を加えたいときに適しています。

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

  • 使い方のポイント:

    • 数字を変えることで振れ幅を大きく（または小さく）できます。

    • テキスト要素に適用すると、文字がゆらゆら揺れるちょっとユニークな見せ方ができます。

3-9. ウォブル（wobble）

「ウォブル」は、左右に揺れながら角度も微妙に変わる独特の動きです。スイングよりもやや激しく、漫画やアニメで登場キャラクターが動揺しているようなイメージを演出できます。注意を引くアラートや、エラー表現にも使えるアニメーションです。

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

  • 使い方のポイント:

    • 「画面内で大げさに揺れる」ような印象になるため、使う場所を選ぶアニメーションでもあります。

    • アラート系のモーダルウィンドウや、ユーザーに目を向けてほしい要素など、特に強調したい場面で活躍します。

3-10. タダ（tada）

「タダ（tada）」は、要素が回転と拡大縮小を組み合わせて賑やかに動くアニメーションです。お祝い感や大きな達成感を演出したいときにぴったりで、表彰画面や実績解除の演出などにも使えます。

@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

  • 使い方のポイント:

    • 大きく揺れたり縮んだりするので、使いどころによってはサイト全体が派手な印象になることも。要素やカラーリングとのバランスを考えて取り入れるのがおすすめです。

    • JavaScriptで「特定のアクションが成功したときだけ一瞬だけ発動」といった形にすると、ユーザーへ成功通知を楽しく伝えられます。

4. カスタマイズや応用のヒント

ここまで10種類のアニメーションを紹介してきましたが、そのまま使うだけでなく、自分好みにカスタマイズするのも楽しい部分です。たとえば、次のようなポイントに注目してみると、簡単にオリジナリティを加えられます。

  1. duration（アニメーション再生時間）の変更

    • 3s を 1s にすると一気にスピーディーな動きに変わり、逆に 5s 以上に延ばすとスローモーションのような滑らかさを演出できます。

  2. easing（イージング）の活用

    • ease-in-out や cubic-bezier などを使うと、単調な動きが「最初はゆっくり、途中から速く」などのメリハリある演出に変化します。

  3. イベント連動（JavaScriptを使った制御）

    • スクロールやクリック、ホバーイベントなど、ユーザー行動に合わせてアニメーションを発火させると、よりインタラクティブなUIが作れます。

  4. 複数のアニメーションの組み合わせ

    • たとえば、フェードインしながらバウンドすると、より柔らかい登場感を得られます。@keyframesを複数重ねることや、キータイムを細かく区切ることによって、独創的な動きを作り出せます。

5. HTMLサンプルコードで実践

ここからは、実際にHTMLファイルを作成して、先ほど挙げた10種類のアニメーションを確認できるサンプルを紹介します。以下の手順でファイルを作成し、ブラウザで開いてみてください。

  1. テキストエディタ（Visual Studio Codeなど）を開き、新規ファイルを作る

  2. animation-demo.html などの名前で保存

  3. 下記のコードをコピペ

  4. ブラウザで animation-demo.html を開くと、スタート/ストップボタンでアニメーションを制御できます

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>アニメーションデモ</title>
    <style>
      /* コンテナ */
      #js-result {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 20px;
      }

      /* アニメーション用ボックスのスタイル */
      .animation-box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
      }

      /* 操作ボタン */
      #animation-controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
      }

      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      /* ▼▼▼ 10種類の@keyframes ▼▼▼ */
      @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes scale {
        0%, 100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.5);
        }
      }
      @keyframes slideIn {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes flipX {
        0%, 100% {
          transform: perspective(400px) rotateX(0deg);
        }
        50% {
          transform: perspective(400px) rotateX(180deg);
        }
      }
      @keyframes flipY {
        0%, 100% {
          transform: perspective(400px) rotateY(0deg);
        }
        50% {
          transform: perspective(400px) rotateY(180deg);
        }
      }
      @keyframes swing {
        20% {
          transform: rotate(15deg);
        }
        40% {
          transform: rotate(-10deg);
        }
        60% {
          transform: rotate(5deg);
        }
        80% {
          transform: rotate(-5deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
      @keyframes wobble {
        0% {
          transform: translateX(0%);
        }
        15% {
          transform: translateX(-25%) rotate(-5deg);
        }
        30% {
          transform: translateX(20%) rotate(3deg);
        }
        45% {
          transform: translateX(-15%) rotate(-3deg);
        }
        60% {
          transform: translateX(10%) rotate(2deg);
        }
        75% {
          transform: translateX(-5%) rotate(-1deg);
        }
        100% {
          transform: translateX(0%);
        }
      }
      @keyframes tada {
        0% {
          transform: scale(1);
        }
        10%, 20% {
          transform: scale(0.9) rotate(-3deg);
        }
        30%, 50%, 70%, 90% {
          transform: scale(1.1) rotate(3deg);
        }
        40%, 60%, 80% {
          transform: scale(1.1) rotate(-3deg);
        }
        100% {
          transform: scale(1) rotate(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="animation-controls">
      <button id="startButton">開始</button>
      <button id="stopButton">停止</button>
    </div>

    <div id="js-result"></div>

    <script>
      // 要素生成用の関数
      function createAnimationElement(id, className) {
        const element = document.createElement("div");
        element.id = id;
        element.className = className;
        element.textContent = id;
        return element;
      }

      // アニメーション開始
      function startAnimation(element, animationName) {
        element.style.animation = `${animationName} 3s infinite`;
      }

      // アニメーション停止
      function stopAnimation(element) {
        element.style.animation = "none";
      }

      // 10種類のアニメーションを管理する配列
      const animations = [
        { id: "bounce", class: "animation-box", name: "bounce" },
        { id: "rotate", class: "animation-box", name: "rotate" },
        { id: "scale", class: "animation-box", name: "scale" },
        { id: "slideIn", class: "animation-box", name: "slideIn" },
        { id: "fadeIn", class: "animation-box", name: "fadeIn" },
        { id: "flipX", class: "animation-box", name: "flipX" },
        { id: "flipY", class: "animation-box", name: "flipY" },
        { id: "swing", class: "animation-box", name: "swing" },
        { id: "wobble", class: "animation-box", name: "wobble" },
        { id: "tada", class: "animation-box", name: "tada" },
      ];

      // コンテナ要素を取得
      const resultDiv = document.getElementById("js-result");

      // 要素を生成してDOMに追加
      animations.forEach((animation) => {
        const element = createAnimationElement(animation.id, animation.class);
        resultDiv.appendChild(element);
      });

      // 開始・停止ボタンのイベント設定
      document.getElementById("startButton").addEventListener("click", () => {
        animations.forEach((animation) => {
          const element = document.getElementById(animation.id);
          startAnimation(element, animation.name);
        });
      });

      document.getElementById("stopButton").addEventListener("click", () => {
        animations.forEach((animation) => {
          const element = document.getElementById(animation.id);
          stopAnimation(element);
        });
      });
    </script>
  </body>
</html>

実際にブラウザを開いて「開始」ボタンを押すと、10種類のアニメーションが同時に発動します。自分が気に入ったアニメーションがあれば、該当する@keyframesのみ抽出して、別のプロジェクトで活用したり、タイミングを変えたりといった応用が可能です。

6. まとめと次のステップ

今回紹介した10種類のユニークなアニメーションは、いずれも汎用性が高く、WebサイトやアプリのUI・UXを向上させる上で強力なツールになります。どれも基本的な@keyframesとCSSプロパティで完結するため、初心者の方でも比較的気軽に取り入れられるでしょう。

  • 「あなたはどのアニメーションから試してみたいですか？」
    ぜひ、実際のHTMLファイルで一つずつ動きを確認し、自分好みにカスタマイズしてみてください。

  • 「イベントと連動させたい場合は？」
    JavaScriptのクリックイベント、ホバーイベント、スクロールイベントなどと組み合わせれば、アニメーションの発火タイミングを自在に制御できます。

  • 「もっと複雑な動きを作りたいなら？」
    複数の@keyframesを段階的に切り替えたり、JavaScriptでアニメーションプロパティをダイナミックに書き換えたりすると、より高度なインタラクションを実装できます。

最後に、SEOの観点からは、アニメーションが多くなるほどページのリソース（特にCSSやJSファイル）が増大して表示速度が遅くなるリスクもあります。画像や動画ファイルの圧縮、コードのミニファイ、不要なライブラリの削除など、パフォーマンス最適化にも気を配りましょう。検索エンジンだけでなく、ユーザーエクスペリエンス向上のためにも重要な要素です。

この記事を参考に、あなたのサイトやアプリに魅力的なアニメーションを取り入れてみてください。 初心者の方でも一歩ずつ理解を深め、さらに発展的な動きに挑戦していくことで、より洗練されたWebクリエイターとしてのスキルを身につけられるはずです。

【外部リンク】

【内部リンク】

【初心者でも簡単！】JavaScriptで始める簡単プログラミング｜音声文字起こしツール作成ガイド

【簡単に試せる】CSSアニメーションの仕組みを徹底解説！初心者でもわかる動きの作り方

【CSSの基本】コンテンツを簡単に中央に配置する方法を徹底解説

Follow Us

RANKINGranking-icon

LATEST POSTS

SNS Feeds

YouTube

@routezero_shinnsotsu

@routezero_shibasuke

RECRUIT

募集要項・エントリー

中途採用エントリーはこちら

arrow

2026年新卒エントリーはこちら

社長と直に面談したい!
社長に直談判

arrow

管理職を目指すあなたは
まずは岡本を倒せ!

arrow

もっとルートゼロを知りたいなら

DISCOVER MORE