offset-distance

offset-distance は、offset-path で決めた道筋の始まりからどれだけ進んだところに要素を置くかを決めます。アニメーションで 0% から 100% まで変えると、要素が道筋に沿って動きます。

構文

<length-percentage>

プリセット

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

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

offset-distance70%

0% より前や 100% より先の値の扱いは、道筋の種類で変わります。

path() で最後を Z で閉じない道筋や、contain を付けた ray() のように終わりのある道筋では、端で止まります。
circle() や、最後を Z で閉じた path() のように一周する道筋では、100% を超えると始まりからもう一周します。マイナスの値は逆向きにたどります。
contain の無い ray() は終わりが無いので、100% より先もそのまま同じ向きに進みます。

プレビューでは、項目に offset-path で波の形の道筋を書き、道筋を灰色の点で描いています。

@keyframes で 0% から 100% まで変えて、アイコンや飾りを道筋に沿って動かすときに使います。複数の要素に違う値を書いて、同じ道筋の上に並べることもできます。