Versatzabstand - CSS-Tricks | CSS-Almanach 2025

Diese Eigenschaft begann das Leben als motion-offset. Diese und alle anderen zugehörigen Motion- * Eigenschaften werden in der Spezifikation in Offset- * umbenannt. Wir ändern die Namen hier im Almanach. Wenn Sie es jetzt verwenden möchten, verwenden Sie wahrscheinlich am besten beide Syntaxen.

Die motion-offsetEigenschaft in CSS sagt: Wie weit motion-pathsind Sie? Dies ist die animierbare Eigenschaft, die Bewegungspfaden zugeordnet ist.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Im obigen Beispiel haben wir den Anfangswert motion-offsetauf gesetzt 0%, obwohl es erwähnenswert ist, dass Null der Standardwert ist, auch wenn er nicht explizit definiert ist (wir hätten das weglassen können).

Variablen

Die offset-distanceEigenschaft akzeptiert die folgenden Werte:

length
percentage

In beiden Fällen gibt der Wert die Länge des Abstands vom Startpunkt des Pfads (Standard ist 0pxoder 0%) zum Endpunkt des Pfads an.

Beispiel

In diesem Beispiel haben wir zwei Kreise, in denen sich ein kleiner Kreis entlang des Pfades eines größeren Kreises bewegt.

Hier ist die SVG-Datei, mit der wir die Formen zeichnen:

Jetzt können wir die .markerKlasse in unserem CSS so einstellen, dass sie den Klassenkoordinaten folgt .track:

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Sehen Sie sich das einfache Beispiel für die Animation entlang eines Pfades von Geoff Graham (@geoffgraham) auf CodePen an.

In ähnlicher Weise können wir den offset-distanceWert bei 50% stoppen und die Animation würde auf halber Strecke abfallen:

Sehen Sie sich das einfache Beispiel für die Animation entlang eines Pfades von Geoff Graham (@geoffgraham) auf CodePen an.

Um die Geschwindigkeit der Animation zu steuern, können Sie den offset-distanceWert mit 300% multiplizieren, um die Geschwindigkeit zu erhöhen. Wenn wir jedoch angegeben haben, wie lange die Animation mit einem Wert ausgeführt werden soll, der größer ist als die Zeit, die das Element benötigt, um den Pfad zu durchlaufen, wird die Bewegung angehalten, bis die Animation ihr Intervall abgeschlossen hat, bevor sie wiederholt wird:

Sehen Sie sich das einfache Beispiel für die Animation entlang eines Pfades von Geoff Graham (@geoffgraham) auf CodePen an.

Browser-Unterstützung

Die offset-distanceEigenschaft wird zum Zeitpunkt des Schreibens noch als experimentelles Feature betrachtet, und es gibt keine Dokumentation zur Browserunterstützung. Es gibt jedoch eine Dokumentation zum motion-pathSupport, die wir vorerst als Basis verwenden können.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.