このページは Cloud Translation API によって翻訳されました。

CSS アニメーションと JavaScript アニメーションの比較

アニメーションは CSS または JavaScript で作成できます。どちらを使用すればよいですか。

Paul Lewis

Sam Thorogood

ウェブでアニメーションを作成する主な方法は、CSS と JavaScript の 2 つです。どちらを選択するかは、プロジェクトの他の依存関係と、達成しようとしている効果の種類によって異なります。

概要

UI 要素の状態を切り替えるなどの単純な「ワンショット」遷移には、CSS アニメーションを使用します。
バウンド、停止、一時停止、巻き戻し、減速などの高度な効果を実現する場合は、JavaScript アニメーションを使用します。
JavaScript でアニメーション化する場合は、Web Animations API または使い慣れた最新のフレームワークを使用します。

ほとんどの基本的なアニメーションは CSS または JavaScript で作成できますが、労力と時間は異なります（CSS と JavaScript のパフォーマンスも参照）。それぞれに長所と短所がありますが、次のガイドラインが参考になります。

UI 要素に小さな自己完結型の状態がある場合は CSS を使用します。CSS の遷移とアニメーションは、ナビゲーションメニューを横から表示したり、ツールチップを表示したりするのに最適です。最終的には JavaScript を使用して状態を制御することになるかもしれませんが、アニメーション自体は CSS に記述します。
アニメーションを細かく制御する必要がある場合は JavaScript を使用します。Web Animations API は標準ベースのアプローチで、現在、ほとんどの最新ブラウザで利用できます。これにより、複雑なオブジェクト指向アプリケーションに最適な実際のオブジェクトが提供されます。JavaScript は、アニメーションを停止、一時停止、減速、逆再生する必要がある場合にも便利です。
シーン全体を手動でオーケストレートする場合は、requestAnimationFrame を直接使用します。これは高度な JavaScript アプローチですが、ゲームを作成する場合や HTML キャンバスに描画する場合に便利です。

また、jQuery の .animate() メソッドや GreenSock の TweenMax など、アニメーション機能を含む JavaScript フレームワークをすでに使用している場合は、アニメーションにそのフレームワークを使用するほうが便利な場合があります。

CSS によるアニメーション

画面上のオブジェクトを動かす最も簡単な方法は、CSS でアニメーション化することです。このアプローチは、何を実行するかを指定するため、宣言型と呼ばれます。

以下は、要素 100px を X 軸と Y 軸の両方で移動する CSS です。これは、500ms を受け取るように設定された CSS 遷移を使用して行います。move クラスが追加されると、transform 値が変更され、遷移が開始されます。

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

試してみる

切り替え効果の継続時間のほかに、イージングを設定することもできます。これは、アニメーションの質感を調整するものです。イージングの詳細については、イージングの基本ガイドをご覧ください。

上記のスニペットのように、アニメーションを管理するために個別の CSS クラスを作成する場合は、JavaScript を使用して各アニメーションのオンとオフを切り替えることができます。

box.classList.add('move');

これにより、アプリのバランスが取れます。JavaScript で状態の管理に集中し、ターゲット要素に適切なクラスを設定すれば、アニメーションの処理はブラウザに任せることができます。この方法を選択すると、要素の transitionend イベントをリッスンできますが、古いバージョンの Internet Explorer のサポートを放棄できる場合に限られます。これらのイベントをサポートした最初のバージョンは 10 です。他のすべてのブラウザでは、このイベントがしばらく前からサポートされています。

遷移の終了をリッスンするために必要な JavaScript は次のようになります。

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

CSS 遷移を使用するだけでなく、CSS アニメーションを使用することもできます。CSS アニメーションを使用すると、個々のアニメーションのキーフレーム、時間、反復処理をより細かく制御できます。

たとえば、ボックスを切り替え効果と同じようにアニメーション化できますが、クリックなどのユーザー操作なしでアニメーション化し、無限に繰り返すことができます。複数のプロパティを同時に変更することもできます。

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

試してみる

CSS アニメーションでは、ターゲット要素とは別にアニメーション自体を定義し、animation-name プロパティを使用して必要なアニメーションを選択します。

古いブラウザで CSS アニメーションを機能させるには、ベンダー接頭辞を追加する必要があります。必要な CSS の接頭辞付きバージョンを作成できるツールは多数あります。これにより、接頭辞なしのバージョンをソースファイルに記述できます。

JavaScript と Web Animations API でアニメーション化する

JavaScript でアニメーションを作成する方法は、CSS の遷移やアニメーションの記述と比べると複雑ですが、通常はデベロッパーに大幅な柔軟性を提供します。Web Animations API を使用すると、特定の CSS プロパティをアニメーション化したり、コンポーザブルエフェクトオブジェクトを作成したりできます。

JavaScript アニメーションは、コードの一部としてインラインで記述するため、命令型です。他のオブジェクト内にカプセル化することもできます。前述の CSS 遷移を再作成するために記述する必要がある JavaScript は次のとおりです。

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

デフォルトでは、Web アニメーションは要素の表示のみを変更します。オブジェクトを移動した場所に固定する場合は、サンプルのように、アニメーションが終了したときにそのオブジェクトの基盤となるスタイルを変更する必要があります。

試してみる

Web Animations API は、W3C の比較的新しい標準です。ほとんどの最新のブラウザでネイティブにサポートされています。サポートされていない最新のブラウザの場合は、ポリフィルを使用できます。

JavaScript アニメーションを使用すると、要素のスタイルをあらゆる段階で完全に制御できます。つまり、アニメーションの速度を遅くしたり、一時停止したり、停止したり、逆再生したり、要素を操作したりできます。これは、複雑なオブジェクト指向アプリケーションを構築する場合に特に便利です。動作を適切にカプセル化できるためです。