offset-distance

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

offset-distance は CSS プロパティで、 offset-path 上の要素を配置する位置を指定します。

試してみましょう

offset-distance: 0%;

offset-distance: 80%;

offset-distance: 50px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  width: 24px;
  height: 24px;
  background: #2bc4a2;
  offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}

/* Provides a reference image of what path the element is following */
#default-example {
  background-position: calc(50% - 12px) calc(50% + 14px);
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}

構文

css

/* 既定値 */
offset-distance: 0;

/* offset-path の途中 */
offset-distance: 50%;

/* パス上の固定距離の位置 */
offset-distance: 40px;

/* グローバル値 */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: unset;

<length-percentage>

要素が (offset-path で定義された) パス上のどのくらいの距離にあるかを指定する長さです。

100% はパスの全長を表します。 (offset-path が基本シェイプまたは path() として定義されている場合)。

公式定義

初期値	`0`
適用対象	座標変換可能要素
継承	なし
パーセント値	パスの全長に対する相対値
計算値	`<length>` の場合は絶対的な値、それ以外の場合はパーセント値
アニメーションの種類	length またはパーセント値, calc();

形式文法

offset-distance = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

例

アニメーション内での offset-distance の使用

CSS モーションパスのモーションアスペクトは、一般に offset-distance プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その offset-path を定義し、 offset-distance に 0% から 100% までを取るアニメーションを設定してください。

HTML

html

<div id="motion-demo"></div>

CSS

css

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

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

結果

仕様書

Specification
Motion Path Module Level 1 # offset-distance-property