offset-anchor

Baseline 2023

Newly available

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

offset-anchor は CSS のプロパティで、 offset-path に沿って実際に移動している要素のボックス内の点を指定します。

試してみましょう

offset-anchor: auto;

offset-anchor: right top;

offset-anchor: left bottom;

offset-anchor: 20% 80%;

#example-element {
  offset-path: path("M 0,20 L 200,20");
  animation: distance 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
  animation-play-state: paused;
}

#example-element.running {
  animation-play-state: running;
}

.wrapper {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  width: 90%;
}

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

#playback {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1em;
}

window.addEventListener("load", () => {
  const example = document.getElementById("example-element");
  const button = document.getElementById("playback");

  button.addEventListener("click", () => {
    if (example.classList.contains("running")) {
      example.classList.remove("running");
      button.textContent = "Play";
    } else {
      example.classList.add("running");
      button.textContent = "Pause";
    }
  });
});

構文

css

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

/*  値 */
offset-anchor: 25% 75%;

/*  値 */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/* 辺からのオフセット値 */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

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

値

auto: offset-anchor には要素の transform-origin と同じ値が与えられます。ただし、 offset-path が none の場合は offset-position から値が取得されます。
: は x/y 座標を定義し、要素のボックスの端から相対的に項目を配置するために使用されます。これは、 1 つから 4 つの値を用いて定義することができます。詳細については、と background-position のリファレンスページを参照してください。 3 つの値を持つ position 構文は、background(-position)を除いて、のどのような使い方でも機能しないことに注意してください。

公式定義

初期値	`auto`
適用対象	座標変換可能要素
継承	なし
パーセント値	relative to the width and the height of the element's reference box
計算値	の場合は絶対的な値、それ以外の場合はパーセント値
アニメーションの種類	position

形式文法

offset-anchor = 
  auto        |
    

 = 
  [ left | center | right | top | bottom |  ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right |  ] [ top | center | bottom |  ]  |
  [ [ left | right ]  ] && [ [ top | bottom ]  ]  

 = 
        |

例

様々な offset-anchor 値を設定

以下の例では、

要素が

要素の中に入っている形は 3 つあります。それぞれの

には同じ offset-path （200 ピクセル長の水平線）が与えられ、それに沿って移動するアニメーションです。そして、 3 つには異なる background-color と offset-anchor 値が与えられています。

それぞれの

は、その中心を通る水平線を線形グラデーションでスタイル付けされており、

のオフセットパスがどこに走っているかを視覚的に表示することができるようになっています。

これにより、異なる offset-anchor 値がどのような効果をもたらすかを確認することができます。 — 最初のものは auto なので、

の中心点をパスに沿って動かします。他の 2 つは、それぞれ

の右上と左下の点をパスに沿って移動させます。

HTML

html

CSS

css

div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

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

結果

仕様書

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