アニメーションの実装手段

主な実装手段 早見表

名前 ファイルサイズ 処理負荷 データの作成 備考
DOM・SVG
CSS トランジション 小さい 軽い エンジニア
CSS アニメーション 小さい 軽い エンジニア
JS ウェブアニメーションAPI 小さい 軽い エンジニア
GSAP 中（数百kB） 中 エンジニア アニメーションライブラリとしては王道。なんでもできる
Motion One 中（数十kB） 中 エンジニア GSAPに比べるとできることが少ないが、バンドルサイズが小さい。
Lottie 中（数百kB〜） 中 デザイナー
canvas
ライブラリなし 小さい 重い エンジニア
Phaser, p5.js, PixiJS などのライブラリ 中（数百kB〜） 重い エンジニア
Three.js 中（数百kB〜） 重い デザイナー（3Dデータ）、エンジニア（配置・エフェクト等） 3D表現したいとき。
画像ファイル・動画ファイル
アニメーション可能な画像（GIF、APNG、WebP）（img要素） 大きい（数MB〜） 軽い？ デザイナー 2023年現在は、APNGが最も妥当な選択肢。WebPのほうが圧縮率が高いが、Safariの完全対応が16.0以降なのでもうしばらく様子見といった状況。
動画ファイル（mp4など）（video要素） 大きい（数MB〜） 軽い？ デザイナー
YouTube動画の埋め込み（iframe要素） 大きい（数MB〜） 軽い？ デザイナー BWが使用するというより、先方支給の動画があるケースで利用する。
コマ送り画像・スプライトアニメーション 大きい（数MB〜） 軽い？ デザイナー スクロール動作に合わせて再生したい、などタイミングを調整したいとき使う（動画ファイルではタイミング制御が難しいため）

上記では主な手段を上げましたが、細かく上げると他にもたくさんあります。
その他の実装手段については以下の記事が参考になります。
2020年中期のWebアニメーション実装の全容と方法70選 - Qiita

実装手段の選択基準

超簡易的な判断基準。実際に作ってみて「なんか違うな」となることもあるので、あくまで参考。

  1. CSSでできそうなシンプルな動きですか？
    • YES: CSSで実装しましょう
  2. （単純な図形の組み合わせや画像の配置で実現できるものではなく、）実写映像や複雑なアニメーションですか？
    • YES: 画像ファイルか映像ファイルで出力しましょう
  3. 操作する要素は多いですか？（パーティクルアニメーションなど）
    • YES: canvasに描画しましょう。
  4. 「クリックした場所に応じて動かす」などのインタラクティブな動作が必要ですか？
    • YES: JSが必要です。
  5. スクロールに連動して動かす？

実装手段ごとの注意事項

DOM・SVG

GSAP

Lottie

画像ファイル・動画ファイル

参考情報: GIFやAPNGとmp4の違い

毎フレームの画像を保持しているGIFやAPNGと違い、mp4のような動画形式では、前のフレームとの差分のみ保持することで圧縮しています。そのため、再生時間が長い動画の場合は画像フォーマットよりも動画形式のほうがファイルサイズが小さくなる傾向があります。
参考: 動画圧縮方式とは | 株式会社ＯＥＳ

関連リンク