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.

Die offset-anchor CSS Eigenschaft bestimmt den Punkt innerhalb des Rahmens eines Elements, das entlang eines offset-path verläuft und tatsächlich entlang des Pfades bewegt wird.

Probieren Sie es aus

offset-anchor: auto;

offset-anchor: right top;

offset-anchor: left bottom;

offset-anchor: 20% 80%;

<section class="default-example" id="default-example"> <div class="wrapper"> <div id="example-element"></div> </div> <button id="playback" 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%, black 50%, black 51%, transparent 52% ); border: 1px solid #cccccc; width: 90%; } @keyframes distance { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } #playback { position: absolute; top: 0; left: 0; font-size: 1em; }

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"; } });

Syntax

css

/* Keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* Edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* Global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: revert; offset-anchor: revert-layer; offset-anchor: unset;

Werte

auto: offset-anchor erhält denselben Wert wie der transform-origin des Elements, es sei denn, offset-path ist none. In diesem Fall wird sein Wert von offset-position übernommen.
<position>: Ein <position> definiert eine x/y-Koordinate, um ein Element relativ zu den Kanten des Rahmens eines Elements zu platzieren. Es kann mit einem bis vier Werten definiert werden. Für weitere Details sehen Sie die Referenzseiten zu <position> und background-position. Beachten Sie, dass die 3-Werte-Position-Syntax für keine Verwendung von <position> funktioniert, außer in background(-position).

Formale Definition

Anfangswert	`auto`
Anwendbar auf	transformierbare Elemente
Vererbt	Nein
Prozentwerte	relative to the width and the height of the element's reference box
Berechneter Wert	for `<length>` the absolute value, otherwise a percentage
Animationstyp	Position

Formale Syntax

offset-anchor = 
 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>

Im folgenden Beispiel haben wir drei <div>-Elemente, die in <section>-Elemente verschachtelt sind. Jedes <div> erhält denselben offset-path (eine 200 Pixel lange horizontale Linie) und wird animiert, um sich entlang dieser Linie zu bewegen. Die drei erhalten dann unterschiedliche background-color und offset-anchor Werte.

Jedes <section> wurde mit einem linearen Verlauf gestylt, um eine horizontale Linie durch seine Mitte zu ziehen, damit Sie eine visuelle Anzeige davon erhalten, wo die Offset-Pfade der <div>s verlaufen.

Dies ermöglicht es Ihnen, den Effekt der verschiedenen offset-anchor Werte zu sehen — der erste, auto, bewirkt, dass sich der Mittelpunkt des <div>s entlang des Pfades bewegt. Die anderen beiden bewirken, dass sich die oberen rechten und unteren linken Punkte des <div>s entlang des Pfades bewegen.

HTML

html

<section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section>

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%, black 50%, black 51%, transparent 52% ); border: 1px solid #cccccc; 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%; } }