offset-path が必要な理由

CSSアニメーションといえば、transform: translateX() や @keyframes を使った直線移動が一般的です。しかし、曲線や円、複雑なSVGパスに沿って要素を動かしたい場合はどうすればよいでしょうか？

その答えが offset-path です。このプロパティは、要素がたどるパスをCSS内で直接定義できるようにします。もともとは motion-path という名前でしたが、W3C仕様の改訂に伴い offset-* 系に名称変更されました。両方の構文がまだ動作しますが、将来を見据えて offset-path を使用することをお勧めします。

.thing-that-moves {
  /* 旧構文 (Blinkブラウザ、2015年頃) */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
  
  /* 新構文 (Chrome安定版、2016年12月頃) */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

このプロパティ自体はアニメーション可能ではありません。パスを 定義 する役割を担い、実際の動きは offset-distance と @keyframes で制御します。

CSS offset-path animation on a laptop screen showing a moving element along a path

実践例: offset-path で円形パスアニメーション

最も基本的な使い方をコードで見てみましょう。以下はオレンジ色の円が円形パスに沿って回り続ける例です。

<div class="circle"></div>

.circle {
  width: 40px;
  height: 40px;
  background: orange;
  border-radius: 50%;
  
  /* SVGパス: 半径4の円 (座標系の単位はピクセル) */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
  
  animation: move 3s linear infinite;
}

@keyframes move {
  100% {
    /* 新構文 */
    offset-distance: 100%;
    
    /* 旧構文 (ブラウザ互換性用) */
    motion-offset: 100%;
  }
}

⚠️ 注意: offset-distance をアニメーションする際、from キーフレームを省略するとデフォルトの 0% から開始します。to または 100% だけでも問題ありません。

パスデータの入手方法

SVG編集ツール（Illustrator、Figmaなど）で曲線を描き、d 属性の値をコピーして path() にそのまま入れます。CSSに持ってくる際は 単位なしの値 を使用します。

  • HTML要素に適用する場合、座標は ピクセル 単位で解釈されます。
  • SVG内部の要素に適用する場合、そのSVGの viewBox 座標系に従います。

自動回転の制御: offset-rotate

要素がパスに沿って移動するとき、デフォルトで進行方向を向くよう自動回転します。offset-rotate でこの動作を細かく調整できます。

.mover {
  offset-rotate: auto;        /* 初期値: 進行方向を向く */
  offset-rotate: reverse;     /* 逆方向 */
  offset-rotate: 30deg;       /* 固定角度 */
  offset-rotate: auto 30deg;  /* 進行方向 + 30度回転 */
}

この機能により、まるで車が道路に沿ってハンドルを切るような自然な動きを表現できます。

Developer writing CSS code for offset-path animation on a modern laptop Coding Session Visual

offset-path の制限と注意点

サポートされる値の制限

仕様上、offset-path は path()、none、shape()、url()、circle()、ellipse() など多くの値をサポートするはずですが、現実的に path() と none のみが確実に動作します。url() でSVG内の <path> IDを参照する方法はまだブラウザのサポートが不安定です。

ブラウザ互換性

  • Chrome/Edge: 55+ から安定サポート
  • Firefox: 72+ からサポート
  • Safari: 16.0+ からサポート
  • IE: もちろん非対応

実務のヒント: 古いブラウザを考慮する必要がある場合は、motion-* 構文も併せて宣言しておくと安全です。または GreenSock (GSAP) などのライブラリを使用する方法もあります。

日本開発環境での適用コンテキスト

日本のWeb開発現場では、まだ offset-path は広く使われていません。多くの場合、requestAnimationFrame やライブラリに依存しています。しかし、純粋なCSSだけで実装できる点は パフォーマンス最適化 の面でメリットがあります。特にモバイルWebではGPUアクセラレーションを活用でき、滑らかなアニメーションを実現するのに役立ちます。

次のステップとしての学習方向

  • Web Animations API: offset-path をJavaScriptで制御する方法を学ぶと、動的なパス変更が可能になります。
  • SMILアニメーション: SVGネイティブの animateMotion と比較すると、それぞれの長所・短所が理解できます。
  • clip-path との組み合わせ: offset-path で動きながら clip-path でマスキングする複合エフェクトに挑戦してみてください。

Web animation example with CSS offset-path on a desk setup Dev Environment Setup

まとめ

CSS offset-path は、複雑なパスアニメーションを純粋なCSSで解決できる強力なツールです。motion-path から offset-path への名称変更で混乱するかもしれませんが、核となる概念は同じです。SVGパスデータさえ用意できれば、誰でも簡単に適用できます。

要点まとめ:

  1. offset-path でパスを定義し
  2. offset-distance で進行度をアニメーションし
  3. offset-rotate で方向を調整する。

この記事が役に立った方は、併せて以下の記事もご覧ください。

合わせて読みたい記事

参考資料: 本記事の内容は CSS-Tricks の offset-path アルマナック を基に作成しました。

本コンテンツは、信頼性の高い情報源をもとにAIツールを活用して作成され、編集者によるレビューを経て公開されています。専門家によるアドバイスの代替となるものではありません。