CSS/Eigenschaften/offset-position

Aus SELFHTML-Wiki
CSS‎ | Eigenschaften (Weitergeleitet von Offset-position)
Wechseln zu: Navigation, Suche
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%;
 }
}
Das Element folgt dem Animations-Pfad, wird aber links oben positioniert.

Siehe auch

  • Pfad-Animationen

    entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

  • animierte Textpfade
    • Lauftext
    • Rotationen
    • Einblendungen

Weblinks

Abgerufen am 8.01.2026
von "http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/offset-position"