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 gibt den Punkt innerhalb der Box eines Elements an, der sich entlang eines offset-path bewegt und tatsächlich entlang des Pfads wandert.

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 übernimmt es seinen Wert von offset-position.
<position>: Ein <position> definiert eine x/y-Koordinate, um ein Element relativ zu den Rändern der Elementbox zu platzieren. Es kann mit einem bis vier Werten definiert werden. Für genauere Informationen siehe die Referenzseiten von <position> und background-position. Beachten Sie, dass die Syntax mit drei Werten für <position> nicht funktioniert, außer bei 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> = 
 <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>

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

Jedes <section> wurde mit einem linearen Verlauf gestaltet, der ihm eine waagerechte Linie durch seine Mitte gibt, um Ihnen eine visuelle Darstellung des Verlaufs der Offset-Pfade des <div>-Elements zu bieten.

Dies erlaubt Ihnen zu sehen, welche Wirkung die unterschiedlichen offset-anchor-Werte haben — der erste, auto, bewirkt, dass der Mittelpunkt des <div> sich entlang des Pfads bewegt. Die anderen beiden bewirken, dass die oberen rechten und unteren linken Punkte des <div> sich entlang des Pfads 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%;
 }
}