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

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

CSS または JavaScript を使用してアニメーション化できます。どちらを使用すればよいですか。また、それはなぜですか。

Paul Lewis

Sam Thorogood

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

概要

CSS アニメーションを使用してよりシンプルな「ワンショット」を行うUI 要素の状態切り替えなどの操作を実行できます。
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 による状態の管理に集中できます。ターゲット要素に適切なクラスを設定するだけで、ブラウザはアニメーションの処理を任せることができます。この方法を使用した場合、古いバージョンの Internet Explorer のサポートを無視できる場合に限り、要素の transitionend イベントをリッスンできます。バージョン 10 は、これらのイベントをサポートする最初のバージョンでした。他のすべてのブラウザでは、以前からこのイベントがサポートされています。

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

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

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

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 Animations API は、W3C の比較的新しい標準です。最新のブラウザではネイティブにサポートされています。サポートされていない最新のブラウザには、ポリフィルを使用できます。

JavaScript アニメーションでは、各ステップで要素のスタイルを完全に制御できます。つまり、アニメーションの速度の低下、一時停止、停止、反転、要素の操作を適度に行えます。複雑なオブジェクト指向アプリケーションを構築する場合は、動作を適切にカプセル化できるため、特に便利です。