CSS Motion PathとSVGアニメーション実践ガイド

CSS Motion PathとSVGアニメーション

CSS Motion Pathは、要素を直線ではなく指定した形に沿って動かすCSS機能です。SVGの曲線、地図ルート、プロダクトイラストの線を、そのままブラウザ上の動きに使いやすくなります。

要点

offset-pathで軌道を定義します。
offset-distanceで軌道上の進行位置を制御します。
SVGのpathデータはCSS path()に利用できます。
レスポンシブでは軌道と見た目のずれを確認します。
prefers-reduced-motionを必ず考慮します。

基本例

.marker {
  offset-path: path("M20 120 C120 20 220 220 340 80");
  animation: travel 4s linear infinite;
}

@keyframes travel {
  to {
    offset-distance: 100%;
  }
}

path()の値はSVG path構文です。そのため、既存のSVGルートをUIアニメーションの軌道として再利用できます。

使いやすい場面

プロダクトツアー、地図の移動ルート、グラフ上のマーカー、曲線を進むアイコン、進捗表現に向いています。まずSVG Path Extractorでルートを取り出し、SVG Viewerで確認し、SVG Optimizerで整理します。

HTMLとCSS

<svg viewBox="0 0 360 160" aria-hidden="true">
  <path d="M20 120 C120 20 220 220 340 80" fill="none" stroke="currentColor" />
</svg>

<span class="dot" aria-label="Upload progress"></span>

.dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #14b8a6;
  offset-path: path("M20 120 C120 20 220 220 340 80");
  offset-distance: 0%;
  offset-rotate: auto;
  animation: move-dot 3200ms ease-in-out infinite;
}

@keyframes move-dot {
  to {
    offset-distance: 100%;
  }
}

offset-rotate: autoは進行方向に合わせて要素を回転します。矢印には便利ですが、テキストラベルには向きません。

レスポンシブとアクセシビリティ

CSS path()はSVG viewBoxのように自動拡大縮小されません。アニメーション領域を安定させ、元デザインと同じ座標を使い、複数の画面幅で確認しましょう。

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
    offset-distance: 100%;
  }
}

動きは理解を助けるためのものです。本文、ボタン、入力欄を覆わず、状態を動きだけで伝えないようにします。

SVGViewワークフロー

SVG ViewerでSVGを開き、viewBoxを確認します。
SVG Path Extractorで軌道を抽出します。
外部SVGはSVG Sanitizerで安全にします。
SVG Formatterでレビューしやすくします。
SVG Optimizerで最適化し、再テストします。

まとめ

CSS Motion PathはSVGパスを保守しやすいUIモーションに変える方法です。まず単純な軌道から始め、目的のある動きに絞り、公開前にアクセシビリティを確認しましょう。

CSS Motion PathとSVGアニメーション実践ガイド