offset-anchor

Baseline 2022
Newly available

Since September 2022, 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 definiert den Punkt innerhalb des Rahmens eines Elements, das entlang eines offset-path reist und tatsächlich entlang des Pfades bewegt wird.

Probieren Sie es aus

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 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.

Formale Definition

Anfangswertauto
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwerterelative to the width and the height of the element's reference box
Berechneter Wertfor <length> the absolute value, otherwise a percentage
AnimationstypPosition

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>

Beispiele

Festlegen verschiedener offset-anchor-Werte

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

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%,
    #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

Spezifikationen

Specification
Motion Path Module Level 1
# offset-anchor-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-anchor
auto
bottom
center
left
right
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch