offset-position

Baseline 2024

Newly available

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

offset-position は CSS のプロパティで、パスに沿った要素の初期位置を定義します。このプロパティは通常、 offset-path プロパティと組み合わせて、動きの効果を作成するために使用されます。 offset-position の値は、 path() などの offset-path 関数が独自の開始位置を指定していない場合、オフセットパスに沿って移動するための要素の初期配置位置を決定します。

offset-position プロパティは、 offset の構成プロパティ（offset-anchor, offset-distance, offset-path など）に基づくモーションシステムの一部です。これらのプロパティは連携して、パスに沿ってさまざまなモーション効果を作成します。

構文

css

/* キーワード値 */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> 値 */
offset-position: 25% 75%;

/* <length> 値 */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* 辺とオフセット値 */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

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

値

normal: 要素にオフセット開始位置がないことを示し、要素を包含ブロックの 50% 50% の位置に配置します。これは既定値です。
auto: オフセットの開始位置が要素のボックスの左上隅であることを示します。
<position>: 要素をそのボックスの端を基準として配置する位置を x/y 座標で指定します。位置は 1 つから 4 つの値を使用して定義することができます。2 つのキーワード以外の値が使用された場合、最初の値は水平位置、2 つ目の値は垂直位置を表します。1 つの値だけが指定された場合、 2 つ目の値は center とみなされます。 3 つまたは 4 つの値が使用された場合、 <length-percentage> 値は、その前のキーワードの値に対するオフセットとなります。これらの値の型について詳しくは、 background-position を参照してください。

公式定義

初期値	`normal`
適用対象	座標変換可能要素
継承	なし
パーセント値	refer to the size of containing block
計算値	`<length>` の場合は絶対的な値、それ以外の場合はパーセント値
アニ��ーションの種類	position

形式文法

offset-position = 
  normal      |
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

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

例

初期オフセット位置の設定

この例では、 offset-path プロパティを使用して、 cyan 要素が移動するパスを定義しています。 path() CSS 関数の値は、曲線を記述する SVG データパスです。要素は、 move アニメーションの実行中に、この曲線に沿って移動します。

HTML

html

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

CSS

#wrap {
  width: 260px;
  height: 160px;
  border: 1px dashed black;
}

css

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

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

結果

様々なオフセット開始位置の比較

この例では、 ray() を使用して offset-path プロパティの値を指定した場合、要素のさまざまな初期オフセット開始位置を視覚的に比較しています。要素ボックス内の数値は、CSS が適用される要素と、その要素のアンカー点を示しています。

<div class="wrap">
  <div class="box">0</div>
  <div class="box box0">0</div>
  <pre>
    offset-position: normal;
    /* offset-path は未指定 */
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box1">1</div>
  <pre>
    offset-position: normal;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box2">2</div>
  <pre>
    offset-position: auto;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box3">3</div>
  <pre>
    offset-position: left top;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box4">4</div>
  <pre>
    offset-position: 30% 70%;
    offset-path: ray(120deg);
  </pre>
</div>

.wrap {
  position: relative;
  width: 80vw;
  height: 120px;
  border: 1px solid black;
  margin: 0 2em 4em 5em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

css

.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

結果

box0 では、offset-path プロパティがないということは、offset-position が normal または auto の場合��その効果がないことを意味します。offset-position が normal の場合、光線は包含ブロックの中心（つまり 50% 50%）から始まります。これは、オフセットパスの既定の開始位置であり、offset-position が指定されていない場合に使用されます。オフセットの開始位置 auto と left top の違いに注意してください。値 auto は、要素のアンカーポイントをその要素の左上隅に配置しますが、値 left top は、要素のアンカーポイントを包含ブロックの左上隅に配置します。

仕様書

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