offset-distance

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

試してみましょう

構文

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-distance0% から 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-distance

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

関連情報