【簡単に試せる】CSSアニメーションの仕組みがわかる！keyframesとanimationの使い方を初心者向けに解説

はじめに – 「アニメーションはどうやって動くの？」

CSSを使って「動き」を作れることは知っているけど、どうやってそのアニメーションが動いているのか不思議に思ったことはありませんか？

例えば、ボタンをクリックすると色が変わったり、画像がふわっと現れたりする動き。これらの仕組みを知ると、Webデザインがもっと楽しくなります！
この記事では、CSSアニメーションの基本と仕組みを初心者でもわかりやすく解説します。読み終わる頃には、あなたも「CSSってすごい！」と思えるはずです！

2. アニメーションってそもそも何？

まずは基本的な定義から見てみましょう。

アニメーションの基本定義

アニメーションとは、時間の経過に合わせて要素の状態を変化させること。例えば、位置、色、大きさを時間の中で少しずつ変えていくことで「動き」を作ります。

Webデザインにおけるアニメーションの役割

アニメーションは単に見た目を良くするだけではありません。以下のような効果があります。

ページに動きを与えてユーザーの目を引く。
操作が直感的に感じられ、使いやすさが向上する。
デザインに遊び心やプロっぽさをプラス。

3. CSSアニメーションの仕組みをざっくり解説

CSSアニメーションは、以下の2つを組み合わせて動作します。

(1) @keyframes

アニメーションの「動き」を定義する場所です。例えば、「どこからどこまで移動するか」「どんなタイミングで変化するか」を設定します。

(2) アニメーションプロパティ

要素にアニメーションを適用するためのプロパティです。動きの名前や時間、繰り返し回数などを指定します。

実際のコード例

以下は簡単なアニメーションの例です。

html

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

css

/* 動きを定義 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

/* アニメーションを適用 */
.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  animation: move 2s ease-in-out infinite;
}

4. ブラウザがアニメーションを描画する仕組み

CSSアニメーションがどう動いているのか、もう少し深掘りしてみましょう！

(1) レンダリングエンジンの役割

ブラウザには、HTMLやCSSを画面に表示する「レンダリングエンジン」があります。例えば、Chromeでは「Blink」、Safariでは「WebKit」が使われています。このレンダリングエンジンが以下の手順でアニメーションを動かします。

HTMLとCSSを解析する
HTMLは「構造」を、CSSは「見た目や動き」を担当します。
アニメーションの開始
CSSで設定したanimationプロパティを参照し、@keyframesに従って動きを実行。
フレーム単位で描画
1秒間に何十回も画面を更新して、滑らかな動きを実現します。

(2) GPUでの高速処理

アニメーションの一部（transformやopacity）は、GPU（グラフィック処理装置）で高速に処理されます。これにより、動きがスムーズになります。

5. アニメーションのコツ – デザインをもっと良くするポイント

CSSアニメーションを使うときに意識したいポイントを紹介します。

(1) 優先的に使うプロパティ

おすすめ：transformやopacity
これらはパフォーマンスが良く、スムーズな動きが実現できます。
避けたい：widthやheight
これらは処理が重く、カクカクした動きになりやすいです。

(2) 動きをつけすぎない

動きすぎるアニメーションは、ユーザーの注意をそらす原因になります。ポイントは「目立たせたい部分だけに動きを加える」ことです。

(3) タイミング関数を活用

動きに自然さを加えるために、ease-in-outやlinearを使い分けるのがおすすめです。

6. JavaScriptとの違い＆組み合わせの活用例

(1) CSSアニメーションの特徴

宣言的でシンプルに記述できる。
繰り返しやホバーなど、単純な動きに最適。

(2) JavaScriptアニメーションの特徴

イベント（クリック、スクロールなど）に応じて動きをトリガー（特定の動作やイベントを引き起こす「きっかけ」や「条件」のことです。）できる。
条件分岐や複雑な動きの制御が可能。

(3) JavaScriptとCSSを組み合わせた例

以下は、Intersection Observerを使って画面内に要素が入ったときだけCSSアニメーションを発動させる例です。

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Observerによるアニメーション</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
        margin-top: 50px;
      }
      .spacer {
        height: 200px; 
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;
        opacity: 0;
        transform: translateY(50px);
        transition: transform 0.5s ease, opacity 0.5s ease;
      }
      .box.visible {
        opacity: 1;
        transform: translateY(0);
      }
    </style>
  </head>
  <body>
    <h1>Observerでアニメーションを動かす</h1>

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

    <script>
      const boxes = document.querySelectorAll(".box");
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
          }else{
            entry.target.classList.remove("visible");
          }
        });
      });
      boxes.forEach((box) => observer.observe(box));
    </script>
  </body>
</html>