CSS/Eigenschaften/offset-position

Browserunterstützung
caniuse.com

Die Eigenschaft offset-position definiert die Ausgangsposition eines Elements entlang eines Pfades. Diese Eigenschaft wird in der Regel in Kombination mit der Eigenschaft offset-path verwendet, um einen Bewegungseffekt zu erzeugen. Der Wert von offset-position bestimmt, wo das Element zunächst platziert wird, um sich entlang eines Offset-Pfades zu bewegen, wenn eine Offset-Pfadfunktion wie path() keine eigene Startposition angibt.

Erlaubte Werte

• normal entspricht 50% 50%
• auto: entspricht top left
• top, bottom, left, right, center
• <position>: 1, 2, 3 oder 4 Werte, wie bei background-position

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja

Beispiel

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

Beachten Sie: Die Spezifikation nennt sich Motion Path, die Eigenschaften wurden aber in offset-… umbenannt.

Siehe auch

• CSS/Tutorials/Animation/offset#offset-position

Weblinks

• Motion Path Spezifikation (W3C): offset-position property
• MDN: offset-position
• Details: caniuse.com