JavaScript 速習チュートリアル

HTML DOM アニメーション

Volardev 編集部 April 18, 2026

1. 基本的なウェブページ

JavaScriptでHTMLアニメーションを作成する方法を解説するために、まずはシンプルなウェブページを用意します。

コード例

<!DOCTYPE html>
<html>
<body>

<h1>はじめてのJavaScriptアニメーション</h1>

<div id="animation">ここにアニメーションが表示されます</div>

</body>
</html>

2. アニメーションコンテナの作成

すべてのアニメーションは、コンテナ（container）となる要素に対して相対的に配置されるべきです。

例

<div id="container">
  <div id="animate">アニメーションする要素</div>
</div>

3. 要素のスタイリング

コンテナ要素は position: relative で作成する必要があります。
アニメーションさせる要素は position: absolute で作成します。

例

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

4. アニメーションのコードロジック

JavaScriptによるアニメーションは、要素のスタイルを段階的に変更するようにプログラミングすることで実現します。

これらの変更はタイマーによって呼び出されます。タイマーのインターバル（間隔）を短く設定することで、アニメーションは連続的な動きとして見えるようになります。

基本的なコード構成は以下の通りです。

例

// 5ミリ秒ごとにフレームを更新
id = setInterval(frame, 5);

function frame() {
  if (/* 終了条件の判定 */) {
    clearInterval(id);
  } else {
    /* 要素のスタイルを変更するコード */ 
  }
}

5. JavaScriptによる完全なアニメーションの実装

実際に要素を移動させる完全なスクリプトの例です。

例

function myMove() {
  let id = null;
  const elem = document.getElementById("animate");
  let pos = 0;
  
  // 既存のタイマーをクリア
  clearInterval(id);
  
  // 5ミリ秒ごとにframe関数を実行
  id = setInterval(frame, 5);
  
  function frame() {
    if (pos == 350) {
      // 350pxに達したらタイマーを停止
      clearInterval(id);
    } else {
      // 位置をインクリメントし、スタイルを更新
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}