offset-path

offset-path は、要素を置く道筋（曲線や直線、円など）を決めます。道筋のどこに置くかは offset-distance で決め、アニメーションで offset-distance を変えると、要素が道筋に沿って動きます。

構文

none | <offset-path> || <coord-box>
<offset-path> = <ray()> | <url> | <basic-shape>

プリセット

右下の角をドラッグするとサイズを変えられます

.box > :nth-child(2) {
  offset-distance: 30%;
  offset-path: path("M 20 80 C 80 0 160 160 220 80");
}

none：初期値です。道筋が無く、要素は元の位置のままです。
path("…")：SVG の path 要素の d 属性と同じ書き方で道筋を描きます。M（そこへ移る）、L（直線）、Q・C（曲線）、A（円弧）、Z（始まりに戻って閉じる）などのコマンドのあとに、px の数を並べます。
ray(角度長さ contain)：始まりの位置からまっすぐ伸びる線です。角度は 0deg が真上で、時計回りに測ります。長さはclosest-side（省いたとき。いちばん近い辺まで）、closest-corner、farthest-side、farthest-corner、sides（その向きに進んで箱の辺に当たるまで）から選び、親の箱（包含ブロック）の大きさで決まります。contain を付けると、道筋の終わりでも要素が箱からはみ出さないように線を短くします。始まりの位置は offset-position で決め、初期値の normal では親の箱の真ん中です。
circle(半径)：円の道筋です。中心は ray() の始まりと同じく親の箱の真ん中で、いちばん右の点から時計回りに進みます。半径は長さか、closest-side（省いたとき）・farthest-side です。

ここでは選べませんが、inset() や polygon() などほかの図形の関数や、SVG の図形を指す url(#id) も書けます。道筋の大きさの基準にする親の箱の範囲（border-box など）を続けて書くこともできます。

プレビューでは、項目を道筋の 30% の位置（offset-distance: 30%）に置き、道筋を灰色の点で描いています。初期値の offset-rotate: auto で、矢印が道筋の進む向きを向きます。

@keyframes で offset-distance を 0% から 100% まで変えて、アイコンや飾りを曲線に沿って動かすときに使います。ray() と offset-distance を組み合わせると、時計の文字盤のように、要素を中心から決まった角度と距離の位置に並べることもできます。

仕様では、path() の座標は親の箱の左上から測ります。Chrome では要素自身の元の位置の左上から測るので、要素が親の箱の左上に無いとブラウザによって位置がずれます。プレビューでは項目を箱の左上に置いているので、どちらでも同じ位置になります。
offset-path を書くと、offset-distance が 0 でも要素は道筋の始まりへ動き、道筋の向きに合わせて回ります。transform と同じように、重なりの文脈（stacking context）も作ります。
path() は Chrome・Edge 64、Firefox 72、Safari 16 から、ray() は Chrome・Edge 116、Firefox 122、Safari 16 から、circle() は Chrome・Edge 116、Firefox 122、Safari 18 から使えます。