Offset Path — CSSで曲線パス上を動かす実装

CODE

HTML

<div class="demo-stage ofp-stage">
  <svg class="ofp-svg" viewBox="0 0 300 160" fill="none" aria-hidden="true">
    <path d="M 20 130 C 70 20, 130 150, 180 60 S 260 30, 285 110" stroke="rgba(255,255,255,.18)" stroke-width="2" stroke-dasharray="5 6"/>
  </svg>
  <span class="ofp-dot" aria-hidden="true"></span>
  <span class="ofp-ship" aria-hidden="true">▲</span>
  <p class="ofp-label">OFFSET PATH</p>
</div>

CSS

.ofp-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; padding:2rem; background:#0F0F12; min-height:280px; overflow:hidden; }
.ofp-svg { position:absolute; top:50%; left:50%; width:300px; height:160px; transform:translate(-50%,-58%); }
.ofp-dot, .ofp-ship {
  position:absolute; top:50%; left:50%;
  margin:-80px 0 0 -150px;
  offset-path: path("M 20 130 C 70 20, 130 150, 180 60 S 260 30, 285 110");
  offset-rotate: auto;
}
.ofp-dot {
  width:14px; height:14px; border-radius:50%;
  background:#E91B89; box-shadow:0 0 16px 4px rgba(233,27,137,.5);
  animation: ofp-run 5s cubic-bezier(.5,0,.5,1) infinite;
}
.ofp-ship {
  color:#5BAADE; font-size:.9rem; line-height:1;
  animation: ofp-run 5s cubic-bezier(.5,0,.5,1) infinite;
  animation-delay:-2.5s;
}
@keyframes ofp-run {
  from { offset-distance:0%; }
  to   { offset-distance:100%; }
}
.ofp-label { position:relative; font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.3em; color:#5A5A66; }
@media (prefers-reduced-motion: reduce) {
  .ofp-dot, .ofp-ship { animation:none; offset-distance:60%; }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

要素を曲線のパスに沿って走らせるモーションパスをCSSだけで作って。動かす要素に offset-path: path("M 20 130 C 70 20, 130 150, 180 60 S 260 30, 285 110"); を指定する。パス文字列はSVGの d 属性と同じ書式なので、SVGで軌道の線を描いて同じ d をコピーすれば線の上をぴったり走る。アニメーションは @keyframes で offset-distance を 0% から 100% へ動かすだけ。offset-rotate: auto を付けると要素が進行方向を向くので、矢印や乗り物のアイコンに有効。向きを固定したい場合は offset-rotate: 0deg。基準点をずらすには offset-anchor を使う。複数の要素を同じパスに乗せるときは animation-delay を負の値にすると、最初から間隔が空いた状態で始まる。パスの座標系は要素の親を基準にした位置なので、SVGと重ねる場合は両者の原点を margin か transform で揃えること。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

Offset Path（CSSモーションパス）とは

offset-path はCSSのモーションパス仕様で、任意のHTML要素をSVGと同じ書式のパスに沿って移動させられます。@keyframes で offset-distance を 0% から 100% へ動かすだけで軌道アニメーションが完成し、offset-rotate: auto を足せば要素の向きが進行方向に自動で揃います。

当サイトの SVG Line Draw は stroke-dashoffset でパス自体を描く表現、Orbiting Circles は回転レールによる円軌道です。本ページはその中間にあたる「任意の曲線の上を要素が走る」別テーマで、地図上の移動・配送ルート・スキル図解の動線など、直線でも円でもない軌道が必要な場面に向きます。

最も多いつまずきは座標系のずれです。offset-path のパス座標は要素の包含ブロック基準で解決されるため、背景SVGと重ねるときは原点合わせのオフセットを明示的に与える必要があります。

よくある質問

offset-path は SVG の animateMotion と何が違いますか？

SMILの animateMotion がSVG要素にしか使えないのに対し、offset-path は通常のHTML要素にも指定できます。div でもアイコンフォントでも画像でもパス上を走らせられるうえ、CSSアニメーションの機能（イージング・遅延・再生方向・reduced motion対応）がそのまま使えます。SMILは非推奨扱いの経緯があるため、新規実装では offset-path が第一選択です。

パスの座標がずれるときはどうしますか？

offset-path の座標系は要素自身のボックスを基準に解決されるため、背景に敷いたSVGとは原点が一致しません。SVGと要素を同じ親に置き、要素側に margin か transform で原点合わせのオフセットを与えるのが確実です。本ページのコードでは margin でSVGの左上に原点を合わせています。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Offset Path Motion

RELATED EFFECTS

Offset Path（CSSモーションパス）とは

よくある質問