このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
offset-anchor
Baseline 2023Newly 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%;<section> <div> <div></div> </div> <button type="button">Play</button></section>#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"; } });});構文
/* キーワード値 */offset-anchor: top;offset-anchor: bottom;offset-anchor: left;offset-anchor: right;offset-anchor: center;offset-anchor: auto;/* <percentage> 値 */offset-anchor: 25% 75%;/* <length> 値 */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;値
autooffset-anchorには要素のtransform-originと同じ値が与えられます。ただし、offset-pathがnoneの場合はoffset-positionから値が取得されます。<position><position>は x/y 座標を定義し、要素のボックスの端から相対的に項目を配置するために使用されます。これは、 1 つから 4 つの値を用いて定義することができます。詳細については、<position>とbackground-positionのリファレンスページを参照してください。 3 つの値を持つ position 構文は、background(-position)を除いて、<position>のどのような使い方でも機能しないことに注意してください。
公式定義
形式文法
offset-anchor =
auto|
<position>
<position> =
<position-one>|
<position-two>|
<position-four>
<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>
<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}
<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}
<length-percentage> =
<length>|
<percentage>
例
様々な offset-anchor 値を設定
以下の例では、<div> 要素が<section> 要素の中に入っている形は 3 つあります。それぞれの<div> には同じoffset-path （200 ピクセル長の水平線）が与えられ、それに沿って移動するアニメーションです。そして、 3 つには異なるbackground-color とoffset-anchor 値が与えられています。
それぞれの<section> は、その中心を通る水平線を線形グラデーションでスタイル付けされており、<div> のオフセットパスがどこに走っているかを視覚的に表示することができるようになっています。
これにより、異なるoffset-anchor 値がどのような効果をもたらすかを確認することができます。 — 最初のものはauto なので、<div> の中心点をパスに沿って動かします。他の 2 つは、それぞれ<div> の右上と左下の点をパスに沿って移動させます。
HTML
<section> <div></div></section><section> <div></div></section><section> <div></div></section>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 |