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%;
  }
}