【JavaScript入門】DOM操作：CSSの変更によるアニメーション

　ここでは、時間経過に合わせてスタイル値を書き換えることで、要素の見た目が徐々に変化するアニメーションを実装する方法を、主に【requestAnimationFrame】と【.animate()】という２つのアプローチを例示しながら説明します。なお、サンプルコードでは背景に「泡」が上方向に移動するアニメーションを例として採用し、画面タイトルには絵文字を入れて簡易的なCSSによる装飾を施しています。また、プログラム内に日本語のメッセージやコメントを記載しており、各処理の詳細な解説を付けています。

１． CSSの値変更によるアニメーションの基本原理

1.1. アニメーションタイミング制御のためのメソッド

　アニメーション処理は、一定時間ごとに要素のスタイルを更新することで実現されます。従来は setInterval() を用いた方法もありますが、現在ではブラウザの描画タイミングに合わせた requestAnimationFrame() を用いることで、よりスムーズなアニメーションが可能です。下記の表に、アニメーション制御の代表的なメソッドをまとめます。

メソッド説明
requestAnimationFrame(f)ブラウザの描画タイミングでコールバック関数を実行し、アニメーションを効率的に更新する。requestID を返す。
cancelAnimationFrame(id)指定した requestID に対応するアニメーション処理をキャンセルする。

1.2. サンプルコードによる実例：泡が上に流れるアニメーション

　以下のコードでは、まずダミーテキストを生成してページ下部に配置し、その後、複数の「泡」要素（丸い div 要素）をランダムな初期位置に配置します。次に、requestAnimationFrame() を使って各泡の位置を毎フレーム更新し、ゆっくり上に移動させることで、画面上で泡が浮かび上がるようなアニメーションを実現しています。

ファイル名： cssChangeAnimation.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✨ CSS変更アニメーション入門</title>
  <style>
    /* 泡要素用のスタイル */
    .bubble {
      position: fixed;          /* 固定位置 */
      z-index: -99;             /* 背景に表示 */
      width: 80px;              /* 幅 */
      height: 80px;             /* 高さ */
      border-radius: 40px;      /* 丸い形状 */
      background: #3498db;       /* 青系の背景色 */
      opacity: 0.3;             /* 半透明 */
    }
    
    /* ダミーテキスト用のスタイル（任意） */
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 10px;
      background: #f7f9fc;
    }
  </style>
</head>
<body>
  <script>
    // STEP 1: ダミーテキストの生成と追加
    // 「あふれるインスピレーション」を500回繰り返して、ページ内にテキストノードとして追加
    const dummyText = 'あふれるインスピレーション '.repeat(500);
    const textNode = document.createTextNode(dummyText);
    document.body.appendChild(textNode);

    // STEP 2: 泡要素の生成
    // 画面に表示する泡の数を決定し、各要素を作成する
    const bubbleCount = 20;
    const bubbles = [];
    for (let i = 0; i < bubbleCount; i++) {
      const bubble = document.createElement('div');
      bubble.classList.add('bubble');
      // x, y 座標は画面内のランダムな位置（泡サイズを考慮）
      const x = Math.random() * window.innerWidth - 40;
      const y = Math.random() * window.innerHeight - 40;
      bubble.style.left = `${x}px`;
      bubble.style.top = `${y}px`;
      bubbles.push(bubble);
      document.body.appendChild(bubble);
    }

    // STEP 3: requestAnimationFrame() を用いたアニメーション処理
    // 前回のフレーム時刻を記録する変数を用意
    let lastTime = performance.now();
    
    // アニメーション関数：各フレームごとに泡の位置を更新する
    function animate(currentTime) {
      // 前回からの経過時間（ミリ秒）
      let deltaTime = currentTime - lastTime;
      lastTime = currentTime;

      // 各泡の位置を更新
      bubbles.forEach(bubble => {
        // 現在の y 座標を取得（文字列を数値に変換）
        let currentY = parseFloat(bubble.style.top);
        // deltaTime に応じて上方向へ移動（ここでは100で割って速度を調整）
        let newY = currentY - deltaTime / 100;
        // 画面の上端を超えた場合は、下端に再配置
        if (newY < -80) {
          newY = window.innerHeight;
        }
        bubble.style.top = newY + "px";
      });
      // 次のフレームをリクエストして、再び animate 関数を呼び出す
      requestAnimationFrame(animate);
    }
    
    // STEP 4: アニメーション開始
    requestAnimationFrame(animate);
  </script>
</body>
</html>

1.3. 動作例の解説

初期状態

このプログラムをブラウザで実行すると、以下のような動作が観察できます。

  • ページ内には、背景にダミーテキストが表示され、画面上には20個の半透明な青色の泡がランダムな位置に配置されています。

アニメーション中

  • requestAnimationFrame() により、各フレームごとに各泡の y 座標が減算され、泡がゆっくりと上方向に移動します。
  • もし泡が画面上端（-80px）を超えると、即座に画面下端（window.innerHeight）に再配置され、連続的な上昇アニメーションが実現されます。

プログラム解説

performance.now() メソッド

performance.now() は、現在の時刻をミリ秒単位（小数点以下も含む）で返すメソッドです。例えば、戻り値は 1234.5678 のような数値となり、時間計測を非常に高い精度で行いたいときに利用されます。

２． Web Animations API を用いたアプローチの概要

　近年では、要素に対するアニメーション処理をより宣言的に記述できる .animate() メソッドが登場しています。以下の表に、.animate() に関する基本的なメソッドとプロパティについてまとめます。

メソッド説明
.animate(a, b)引数 a で変化させるスタイル設定、b でタイミングなどの詳細設定を指定し、Animationオブジェクトを返す。
プロパティ説明
durationアニメーションにかける時間（ミリ秒）
delayアニメーション開始前の遅延時間（ミリ秒）
easingイージング（変化の滑らかさなどの動作の指定）
endDelayアニメーション終了後に待機する時間（ミリ秒）

※ .animate() を使った場合、要素はキー フレームごとに指定したスタイルに沿って変化していき、Promise を返す finished プロパティを用いることで、アニメーション終了後の処理が容易に連携できます。

　ここでは主に requestAnimationFrame() を使った手法について詳しく解説しましたが、より宣言的なアプローチを求める場合は .animate() メソッドの活用も検討してください。

まとめ

ここでは、CSSの変更によるアニメーション実現の基本手法について説明しました。

  • まず、JavaScriptを用いて要素のスタイル値（ここでは、位置を表す top プロパティ）を時間経過に合わせて更新する方法として、requestAnimationFrame() を用いた実装例を示しました。
  • さらに、Web Animations API の .animate() メソッドによる宣言的なアプローチの概要と、関連するプロパティやメソッドを表形式で整理しました。

　これらの手法を理解することで、より自然で効率的なアニメーション表現が可能となり、ユーザーに魅力的なインターフェースを提供できるようになります。