JavaScriptアニメーションの基本を理解しよう！きっかけ・動き・結果の3要素

こんにちは、とまだです。

JavaScriptでアニメーションを作りたいけど、何から始めればいいか分からずに困っていませんか？

CSSなら何となく触れるけど、JavaScriptとなると急にハードルが高く感じますよね。

でも大丈夫です。基本の仕組みさえ理解すれば、思っているより簡単に作れるようになります。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScriptアニメーションの基本について解説していきます。

JavaScriptアニメーションとは？

JavaScriptアニメーションとは、Webページの要素を動かす技術のことです。

例えば日常生活のテレビを思い出してください。

リモコンでチャンネルを変える時の流れを考えてみましょう。

まずリモコンのボタンを押します。すると画面が切り替わります。そして新しい番組が表示されます。

JavaScriptアニメーションも同じような仕組みで動いています。

以下のコードを見てください。

// ボタンをクリックしたら（きっかけ）
button.onclick = function() {
  // 要素を動かす（動き）
  element.style.left = '200px';
  // 新しい位置に表示される（結果）
};

このように「きっかけ」「動き」「結果」の3つがあれば、アニメーションは成立します。

難しく考える必要はありません。

CSSアニメーションとJavaScriptアニメーションの違い

「CSSでもアニメーションは作れるのに、なぜJavaScriptを使うの？」

そんな疑問を持つかもしれません。

確かにCSSでもアニメーションは作れます。

しかし、CSSアニメーションには制限があります。

アニメーションを途中で止めたり、速さを動的に変えたりできません。

また、複雑なタイミング制御もできません。

ユーザーの操作に応じた動きを作ることも難しいです。

一方、JavaScriptなら自由自在です。

例えるなら、CSSは決められたレールの上を走る電車です。

JavaScriptは自由に道を選べる車のようなものです。

だから複雑な動きを作りたい時は、JavaScriptを使うのです。

最初に作るシンプルなアニメーション

それでは実際に手を動かしてみましょう。

まずは「ボタンを押したら要素が動く」という基本的な例から始めます。

HTMLはこのように書きます。

<button id="moveButton">動かす！</button>
<div id="box" class="box">動く箱</div>

次にCSSで見た目を整えます。

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  left: 0;
  transition: left 0.5s ease;
}

最後にJavaScriptで動きをつけます。

const button = document.getElementById('moveButton');
const box = document.getElementById('box');

button.addEventListener('click', function() {
  box.style.left = '200px';
});

たったこれだけで、ボタンをクリックすると箱が右に動きます。

でも、これだと一度しか動きませんね。

行ったり来たりできるように改良してみましょう。

let isRight = false;

button.addEventListener('click', function() {
  if (isRight) {
    box.style.left = '0px';
    isRight = false;
  } else {
    box.style.left = '200px';
    isRight = true;
  }
});

これで箱が左右に動くようになりました。

基本的な仕組みは理解できましたか？

requestAnimationFrameで滑らかな動きを実現

先ほどの例はCSSのtransitionに頼っていました。

でも、純粋なJavaScriptだけで滑らかなアニメーションを作る方法があります。

それがrequestAnimationFrameです。

アニメーションの原理はパラパラ漫画と同じです。

少しずつ違う絵を高速で切り替えることで、動いているように見えるのです。

以下のコードを見てください。

let position = 0;

function animate() {
  position += 2; // 少しずつ移動
  box.style.left = position + 'px';

  if (position < 200) {
    requestAnimationFrame(animate);
  }
}

button.addEventListener('click', function() {
  position = 0;
  animate();
});

requestAnimationFrameは1秒間に約60回画面を更新します。

だからとても滑らかに見えるのです。

実務でよく使うアニメーションパターン

実際の開発現場でよく使われるアニメーションを3つ紹介します。

フェードイン効果

Webサイトをスクロールしていると、要素がふわっと表示されることがありますよね。

それがフェードイン効果です。

function fadeIn(element) {
  let opacity = 0;
  element.style.opacity = 0;

  function fade() {
    opacity += 0.05;
    element.style.opacity = opacity;

    if (opacity < 1) {
      requestAnimationFrame(fade);
    }
  }

  fade();
}

このコードで、要素が徐々に表示されるようになります。

スライドメニュー

ハンバーガーメニューをクリックすると、横からメニューが出てきますよね。

そのような動きも簡単に作れます。

const menu = document.getElementById('menu');
let isOpen = false;

menuButton.addEventListener('click', function() {
  if (isOpen) {
    menu.style.transform = 'translateX(-100%)';
  } else {
    menu.style.transform = 'translateX(0)';
  }
  isOpen = !isOpen;
});

transformを使うことで、スムーズな動きを実現できます。

ローディングアニメーション

データを読み込む時に表示される、くるくる回るアイコンです。

これも簡単に作れます。

let rotation = 0;

function rotate() {
  rotation += 5;
  loader.style.transform = `rotate(${rotation}deg)`;

  if (isLoading) {
    requestAnimationFrame(rotate);
  }
}

回転角度を少しずつ増やすことで、回転しているように見せています。

よくあるトラブルと解決方法

アニメーションを作っていると、いくつかの問題に遭遇することがあります。

アニメーションがカクカクする場合

setIntervalを使っていませんか？

setIntervalは一定間隔で処理を実行しますが、ブラウザの状態によってはカクカクすることがあります。

requestAnimationFrameを使えば、ブラウザが最適なタイミングで実行してくれます。

だから滑らかに動くのです。

要素が動かない場合

CSSのpositionが設定されていない可能性があります。

要素を動かすには、position: relativeかposition: absoluteが必要です。

この設定を忘れずに追加しましょう。

スマホで動作が重い場合

CSS transformを使うことで解決できます。

leftやtopを使うより、transform: translateX()を使う方が軽いです。

これはGPUアクセラレーションを利用できるからです。

アニメーションライブラリの活用

基本が理解できたら、ライブラリを使うのもおすすめです。

初心者向け：Anime.js

Anime.jsは軽量で使いやすいライブラリです。

以下のように簡単に使えます。

anime({
  targets: '#box',
  translateX: 250,
  duration: 2000,
  easing: 'easeInOutQuad'
});

たった数行で複雑なアニメーションが作れます。

本格派向け：GSAP

GSAPはプロも使う高機能なライブラリです。

2025年4月30日より完全無料になりました。

ただし、機能が豊富な分、学習コストは高めです。

まずはAnime.jsから始めて、慣れてきたらGSAPに挑戦するのがおすすめです。