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

CSS または JavaScript を使用してアニメーション化できます。どちらを使用すべきですか。また、その理由は何ですか。

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

まとめ

  • 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 アニメーションを使用することもできます。これにより、個々のアニメーション キーフレーム、継続時間、反復処理をより細かく制御できます。

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

.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 アニメーションでは、すべてのステップで要素のスタイルを完全に制御できます。つまり、アニメーションの速度を遅らせたり、一時停止、停止、反転したり、要素を適宜操作したりできます。これは、動作を適切にカプセル化できるため、複雑なオブジェクト指向アプリケーションを構築する場合に特に便利です。