このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2022年9月.
offset-distance は CSS プロパティで、offset-path 上の要素を配置する位置を指定します。
試してみましょう
offset-distance: 0%;offset-distance: 80%;offset-distance: 50px;<section> <div></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: revert-layer;offset-distance: unset;<length-percentage>要素が（
offset-pathで定義された）パス上のどのくらいの距離にあるかを指定する長さです。100% はパスの全長を表します。（
offset-pathが基本シェイプまたはpath()として定義されている場合）。
公式定義
形式文法
offset-distance =
<length-percentage>
<length-percentage> =
<length>|
<percentage>
例
アニメーション内での offset-distance の使用
CSS モーションパスのモーションアスペクトは、一般にoffset-distance プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、そのoffset-path を定義し、offset-distance に0% から100% までを取るアニメーションを設定してください。
HTML
html
<div></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 |