offset-anchor

auto

offset-anchor erhält denselben Wert wie der transform-origin des Elements, es sei denn, offset-path ist none, in diesem Fall wird der Wert von offset-position übernommen.

<position>

Ein <position> definiert eine x/y-Koordinate, um ein Element relativ zu den Rändern des Rahmens eines Elements zu platzieren. Es kann mit einem bis vier Werten definiert werden. Für weitere Details siehe die Referenzseiten <position> und background-position. Beachten Sie, dass die 3-Wert-Positionssyntax für keine Verwendung von <position> außer bei background(-position) funktioniert.

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>-Elementen verschachtelt sind. Jedes <div> erhält denselben offset-path (eine 200 Pixel lange horizontale Linie) 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, um ihm eine horizontale Linie in der Mitte zu geben, die Ihnen eine visuelle Darstellung davon gibt, wo die Offset-Pfade der <div> verlaufen.

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

HTML

<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></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%;
  }
}

Ergebnis

• offset
• offset-distance
• offset-rotate
• SVG <path>