offset-distance

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

構文

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

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

/* パス上の固定距離の位置 */
offset-distance: 40px;
<length-percentage>
要素が (offset-path で定義された) パス上のどのくらいの距離にあるかを指定する長さです。
100% はパスの全長を表します。 (offset-path が基本シェイプまたは path() として定義されている場合)。

形式文法

<length-percentage>

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

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

HTML

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

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%;
  }
}

結果

仕様書

仕様書 状態 備考
Motion Path Module Level 1
offset-distance の定義
草案 初回定義
初期値0
適用対象変形可能要素
継承なし
パーセンテージrefer to the total path length
計算値length の場合は絶対的な値、さもなくばパーセンテージ
アニメーションの種類length または percentage, calc();

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
offset-distanceChrome 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-distance を使用しています。
Edge 完全対応 79
完全対応 79
完全対応 79
代替名
代替名 非標準の名前 motion-distance を使用しています。
Firefox 完全対応 72
完全対応 72
未対応 69 — 72
無効
無効 From version 69 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 42
完全対応 42
完全対応 33
代替名
代替名 非標準の名前 motion-distance を使用しています。
Safari 未対応 なしWebView Android 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-distance を使用しています。
Chrome Android 完全対応 55
完全対応 55
完全対応 46
代替名
代替名 非標準の名前 motion-distance を使用しています。
Firefox Android 未対応 なしOpera Android 完全対応 42
完全対応 42
完全対応 33
代替名
代替名 非標準の名前 motion-distance を使用しています。
Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
完全対応 6.0
完全対応 5.0
代替名
代替名 非標準の名前 motion-distance を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。