offset-position

Baseline 2024
Newly available

Since January 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die offset-position CSS Eigenschaft definiert die Anfangsposition eines Elements entlang eines Pfades. Diese Eigenschaft wird typischerweise in Kombination mit der offset-path Eigenschaft verwendet, um einen Bewegungseffekt zu erzeugen. Der Wert von offset-position bestimmt, wo das Element sich initial befindet, um sich entlang eines Offset-Pfades zu bewegen, falls eine offset-path Funktion wie path() keine eigene Startposition vorgibt.

Die offset-position Eigenschaft ist Teil eines Bewegungssystems, das auf offset Bestandeigenschaften basiert, einschließlich offset-anchor, offset-distance, und offset-path. Diese Eigenschaften arbeiten zusammen, um verschiedene Bewegungseffekte entlang eines Pfades zu erzeugen.

Syntax

css
/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

Werte

normal

Gibt an, dass das Element keine Offset-Startposition hat und platziert das Element bei 50% 50% des umschließenden Blocks. Dies ist der Standardwert.

auto

Gibt an, dass die Offset-Startposition die obere linke Ecke des Elementkastens ist.

<position>

Spezifiziert die Position als x/y-Koordinate, um ein Element relativ zu seinen Kanten des Kastens zu platzieren. Die Position kann mit einem bis vier Werten definiert werden. Wenn zwei Nicht-Schlüsselwort-Werte verwendet werden, repräsentiert der erste Wert die horizontale Position und der zweite Wert die vertikale Position. Wird nur ein Wert spezifiziert, wird angenommen, dass der zweite Wert center ist. Wenn drei oder vier Werte verwendet werden, sind die <length-percentage> Werte Offsets für die vorangehenden Schlüsselwort-Werte. Für eine genauere Erklärung dieser Werttypen siehe background-position.

Formale Definition

Anfangswertnormal
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwerterefer to the size of containing block
Berechneter Wertfor <length> the absolute value, otherwise a percentage
AnimationstypPosition

Formale Syntax

offset-position = 
  normal      |
  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

Anfangs-offset-position für einen offset-path festlegen

In diesem Beispiel wird die offset-path Eigenschaft verwendet, um den Pfad zu definieren, entlang welchem das türkise Element sich bewegen soll. Der Wert der path() CSS Funktion ist ein SVG Datenpfad, der einen kurvigen Pfad beschreibt. Das Element bewegt sich entlang dieses kurvigen Pfades während der move Animation.

HTML

html
<div id="wrap">
  <div id="motion-demo"></div>
</div>

CSS

css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Ergebnis

Vergleich verschiedener initialer Offset-Startpositionen

Dieses Beispiel vergleicht visuell verschiedene initiale Offset-Startpositionen eines Elements, wenn ray() verwendet wird, um einen Wert für die offset-path Eigenschaft anzugeben. Die Zahl innerhalb des Elementkastens gibt das Element an, auf welches CSS angewendet wird, sowie den Ankerpunkt des Elements.

css
.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Ergebnis

In box0 hat das Fehlen der offset-path Eigenschaft zur Folge, dass ein offset-position von entweder normal oder auto keinen Effekt hat. Wenn offset-position normal ist, beginnt der Strahl im Zentrum des umgebenden Blocks (d.h. 50% 50%). Dies ist die Standardstartposition eines Offset-Pfades und wird verwendet, wenn keine offset-position angegeben ist. Beachten Sie den Unterschied zwischen den Offset-Startpositionen auto und left top. Der Wert auto richtet den Ankerpunkt des Elements zur eigenen oberen linken Ecke aus, während der Wert left top den Ankerpunkt des Elements zur oberen linken Ecke des umgebenden Blocks ausrichtet.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch