CSSとJavaScriptによるSVGアニメーション：開発者向けコード例（2026年）

2026年にSVGアニメーションが重要な理由

SVGアニメーションは、モダンWebインターフェースの基盤となりました。ユーザーをチェックアウトフローに導く繊細なマイクロインタラクションから、ブランドのアイデンティティを定義するフルスクリーンのヒーローアニメーションまで、アニメーションSVGは他のどのフォーマットにも匹敵できない解像度非依存で、軽量かつアクセシブルなモーションを提供します。

ラスターベースのアニメーション（GIF、アニメーションPNG、あるいはビデオ）とは異なり、SVGはあらゆる画面サイズに完璧にスケールし、4KやRetinaディスプレイでもシャープさを保ち、既にお馴染みのCSSとJavaScriptで操作できます。2026年、Core Web Vitalsが検索ランキングに直接影響する中、SVGアニメーションの習得はオプションではなく必須です。

---

SVGのためのCSSアニメーション基礎

CSSはSVGアニメーションのための最初の、そしてしばしば最良のツールです。ブラウザのコンポジタースレッドがtransformとopacityプロパティのCSSアニメーションをメインスレッドに触れずに処理するため、滑らかな60fpsパフォーマンスが無料で得られます。

CSSトランジション：最もシンプルなアプローチ

.svg-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.svg-icon:hover {
  transform: scale(1.15);
}

.svg-icon path {
  transition: fill 0.25s ease-in-out, stroke 0.25s ease-in-out;
  fill: #6366f1;
}
.svg-icon:hover path {
  fill: #818cf8;
}

ヒント：SVG要素では必ずtransform-originを明示的に設定してください。デフォルトで中央に設定されるHTML要素とは異なり、SVG要素はデフォルトでSVGビューポートの原点(0, 0)を使用します。

CSSキーフレームアニメーション：完全な創造的コントロール

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}
.notification-dot {
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes draw-path {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
.draw-line {
  stroke-dasharray: 1000;
  animation: draw-path 2.5s ease-out forwards;
}

stroke-dasharrayを使った描画テクニックは、Web上で最も人気のあるSVGアニメーションの一つです。ダッシュの長さをパスの全長と等しく設定し、オフセットを最大値からゼロにアニメーションすることで、パスがリアルタイムで描画されているかのような錯覚を作り出します。

CSS Transform：パフォーマンスのスイートスポット

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float-and-rotate {
  0% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(5deg); }
  50% { transform: translateY(-18px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.floating-element {
  animation: float-and-rotate 4s ease-in-out infinite;
  transform-origin: center;
}

コンポジターセーフなプロパティ：transformとopacityのみがコンポジタースレッドでの実行を保証されています。fill、stroke、width、height、dのアニメーションはレイアウトの再計算をトリガーします。

---

JavaScriptアニメーションのアプローチ

CSSが限界に達した時 — 動的な値、スクロールトリガー、物理シミュレーション、複雑なタイムライン — JavaScriptが引き継ぎます。

Web Animations API (WAAPI)

const logo = document.querySelector("#svg-logo");

const fadeIn = logo.animate(
  [
    { opacity: 0, transform: "translateY(20px) scale(0.95)" },
    { opacity: 1, transform: "translateY(0) scale(1)" }
  ],
  {
    duration: 800,
    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
    fill: "forwards"
  }
);

fadeIn.finished.then(() => {
  console.log("ロゴアニメーション完了");
  animateSubElements();
});

GSAP：業界標準ライブラリ

GreenSock Animation Platform（GSAP）は2026年でも最も実績のあるアニメーションライブラリです。SVG固有のプラグインが、カスタムコードで数百行を要するエッジケースを処理します。

import { gsap } from "gsap";

gsap.from("#hero-svg", {
  opacity: 0, scale: 0.8, rotation: -5,
  duration: 1.2, ease: "back.out(1.7)",
  transformOrigin: "center center"
});

const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

tl.from("#bg-circle", { scale: 0, duration: 0.6 })
  .from("#icon-paths path", {
    strokeDashoffset: 500, duration: 1, stagger: 0.15
  }, "-=0.3")
  .from("#label-text", { opacity: 0, y: 15, duration: 0.5 }, "-=0.5");

SMILアニメーション：まだ生きているが、控えめに使用

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="20" fill="#6366f1">
    <animate attributeName="r" values="20;25;20" dur="2s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

---

パフォーマンス最適化の詳細

/* 良い例：コンポジタースレッドのアニメーション */
.optimized {
  transition: transform 0.3s, opacity 0.3s;
}
.optimized:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.9;
}

/* 悪い例：メインスレッドのアニメーション */
.unoptimized {
  transition: top 0.3s, width 0.3s, fill 0.3s;
}

SVGの複雑さを削減

• パスを簡素化：SVGOやVectoSolveの内蔵オプティマイザーなどのツールを使用
• 非表示の要素を削除
• グループをフラット化：不要な<g>のネストはオーバーヘッドを追加
• 繰り返し形状にはシンボルを使用

---

アクセシビリティ：ユーザー設定の尊重

.animated-element {
  animation: slide-in 0.6s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    opacity: 1;
  }
}

const prefersReduced = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (prefersReduced) {
  element.style.opacity = "1";
} else {
  element.animate(
    [{ opacity: 0 }, { opacity: 1 }],
    { duration: 600, easing: "ease-out" }
  );
}

WCAG 2.2 達成基準 2.3.3は、インタラクションでトリガーされるモーションアニメーションを無効にできることを推奨しています。これは法的要件としてますます重要になっています。

---

CSS vs JavaScript vs AI：適切なアプローチの選択

基準	CSSアニメーション	JavaScript (WAAPI/GSAP)	AI (VectoSolve)
セットアップの複雑さ	依存関係ゼロ	最小〜中程度	アップロードして設定
パフォーマンス	優秀	優秀 / 非常に良い	優秀
動的な値	限定的	完全制御	AIが決定
パスモーフィング	非対応	ライブラリ必要	内蔵
最適な用途	ホバー、ループ、トランジション	複雑なインタラクション、データビジュアライゼーション	高速プロトタイピング

---

フレームワーク統合：ReactとNext.js

import { useRef, useEffect } from "react";

function AnimatedIcon({ isActive }) {
  const pathRef = useRef(null);

  useEffect(() => {
    const path = pathRef.current;
    if (!path) return;

    const prefersReduced = window.matchMedia(
      "(prefers-reduced-motion: reduce)"
    ).matches;

    if (prefersReduced) {
      path.style.strokeDashoffset = "0";
      return;
    }

    const length = path.getTotalLength();
    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length;

    const animation = path.animate(
      [{ strokeDashoffset: length }, { strokeDashoffset: 0 }],
      { duration: 1200, easing: "ease-out", fill: "forwards" }
    );

    return () => animation.cancel();
  }, [isActive]);

  return (
    <svg viewBox="0 0 64 64" role="img" aria-label="ステータス">
      <path ref={pathRef} d="M18 44 L26 32 L34 38 L46 20"
        fill="none" stroke="currentColor" strokeWidth="2.5"
        strokeLinecap="round" />
    </svg>
  );
}

---

主要ポイントと次のステップ

1. CSSから始める — シンプルなホバーエフェクト、ローディング状態、ループアニメーション向け
2. Web Animations APIに移行 — 動的制御や再生操作が必要な時
3. GSAPを採用 — 複雑なタイムライン、スクロールアニメーション、SVGモーフィング向け
4. AIツールを検討 — 高速プロトタイピングにVectoSolveのSVGアニメーターなど
5. 常に最適化 — コンポジターセーフなプロパティを使い、prefers-reduced-motionを尊重

最高のSVGアニメーションは、ユーザーがほとんど気づかないもの — 自然に感じられ、瞬時に読み込まれ、静けさを好む人のために優雅にデグレードするものです。

---

プロパティ	コンポジター（高速）	レイアウトトリガー（低速）
transform	はい — GPU加速	いいえ
opacity	はい — GPU加速	いいえ
width / height	いいえ	はい — リフロー発生
top / left	いいえ	はい — リフロー発生
fill / stroke	いいえ	リペイントのみ（中程度）