Versatzpfad - CSS-Tricks | CSS-Almanach 2025

Diese Eigenschaft begann das Leben als motion-path. 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 offset-pathEigenschaft in CSS definiert einen Bewegungspfad für ein Element, dem während der Animation gefolgt werden soll. Hier ist ein Beispiel mit der SVG-Pfadsyntax:

.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"); /* 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"); )

Diese Eigenschaft kann nicht animiert werden, sondern definiert den Pfad für die Animation. Wir verwenden die motion-offsetEigenschaft, um die Animation zu erstellen. Hier ist ein einfaches Beispiel für die Animation des Bewegungsversatzes mit einer @ keyframes-Animation:

.thing-that-moves ( 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 ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Siehe das einfache Beispiel für das Animieren eines Pfads entlang eines Pfads mit CSS-Tricks (@ css-Tricks) auf CodePen.

In dieser Demo wird der orangefarbene Kreis entlang des offset-pathin CSS festgelegten Bereichs animiert . Wir haben diesen Pfad in SVG tatsächlich mit genau denselben path()Daten gezeichnet, aber das ist nicht erforderlich, um die Bewegung zu erhalten.

Angenommen, wir haben in einer SVG-Bearbeitungssoftware einen funky Pfad wie diesen gezeichnet:

Wir würden einen Weg finden wie:

Der dAttributwert ist das, wonach wir suchen, und wir können ihn direkt in CSS verschieben und als offset-path:

Siehe den Stift zEpLRo von CSS-Tricks (@ css-Tricks) auf CodePen.

Beachten Sie die Werte ohne Einheit in der Pfadsyntax. Wenn Sie das CSS auf ein Element in SVG anwenden, verwenden diese Koordinatenwerte das in diesen SVGs eingerichtete Koordinatensystem viewBox. Wenn Sie die Bewegung auf ein anderes HTML-Element anwenden, sind diese Werte Pixel.

Beachten Sie auch, dass wir eine Grafik eines Fingers verwendet haben, der zeigt, wie das Element automatisch gedreht wird, sodass es nach vorne zeigt. Sie können dies steuern mit offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Werte

Wie es am besten , wie können wir sagen, path()und nonesind die einzigen Arbeitswerte für offset-path.

Die offset-pathEigenschaft soll alle folgenden Werte akzeptieren.

path(): Gibt einen Pfad in der SVG-Koordinatensyntax an
url: Verweist auf die ID eines SVG-Elements, das als Bewegungspfad verwendet werden soll
basic-shape: Gibt eine Form gemäß der CSS-Formspezifikation an, die Folgendes umfasst:
- circle()
- ellipse()
- inset()
- polygon()
Clippy ist übrigens ein großartiges Tool zum Generieren von Grundformwerten.
none: Gibt überhaupt keinen Bewegungspfad an

Hier sind einige Tests:

Siehe den Test der Pen-Bewegungspfadwerte mit CSS-Tricks (@ css-Tricks) auf CodePen.

Selbst wenn ein SVG-Element angewiesen wird, auf einen Pfad zu verweisen, über den dieselbe SVG definiert wurde, url()scheint dies nicht zu funktionieren.

Mit der Webanimations-API

Dan Wilson hat einige davon in Future Use: CSS Motion Paths untersucht. Sie haben über die Webanimations-API Zugriff auf dieselben Inhalte in JavaScript. Angenommen, Sie haben eine offset-pathin CSS definiert , können Sie die Animation dennoch über JavaScript steuern:

Siehe den Stift CSS MotionPath von CSS-Tricks (@ css-Tricks) auf CodePen.

Mehr Beispiele

Kopf hoch! Viele davon wurden vor dem Wechsel von Motion- * Benennung zu Offset- * erstellt. Sollte ziemlich einfach zu reparieren sein, wenn Sie so geneigt sind.

Sehen Sie den Stift Whoosh! von Merih Akar (@merih) auf CodePen.

Siehe den Stift pJarJO von Eric Willigers (@ericwilligers) auf CodePen.

Sehen Sie das Pen scalextric Auto auf Bewegungspfad von Kseso (@Kseso) auf CodePen.

Siehe das Pen CSS Motion Path Flugzeug von Ali Klein (@AliKlein) auf CodePen.

Siehe Pen CSS Animate auf SVG Path von 一丝 (@yisi) auf CodePen.

Siehe den Pen Motion Path Infinity von Dan Wilson (@danwilson) auf CodePen.

Siehe die CSS-Bewegungspfadspirale des Stifts von Dan Wilson (@danwilson) auf CodePen.

Siehe den Stift zGzJYd von 一丝 (@yisi) auf CodePen.

Browser-Unterstützung

Die offset-pathEigenschaft wird zum Zeitpunkt dieses Schreibens noch als experimentelles Merkmal angesehen. Wenn Sie aufgrund der derzeitigen mangelnden Browserunterstützung zögern, sie für ein Projekt zu verwenden, sollten Sie in Betracht ziehen, GSAP für diese Animationsstufe zu verwenden, die Sarah auch in ihrem Beitrag behandelt. Dies bietet Ihnen derzeit die umfassendste Browserunterstützung.

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

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
46	72	Nein	79	Nein

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nein

Ab Chrome 46 und Opera 33 (und den zugehörigen mobilen Versionen) haben wir in Blink „anfängliche Unterstützung“ (keine Flagge).

Gibt es einen anderen Weg, dies zu tun?

Unsere eigene Sarah Drasner schrieb über SMIL, die native SVG-Methode für Animationen, und darüber, wie animateMotionObjekte entlang eines SVG-Pfads animiert werden. Es sieht aus wie:

Aber SMIL wird veraltet! Das wird also nicht empfohlen.

GreenSock ist ein anderer Weg, der empfohlen wird. Sarah spricht darüber in GSAP + SVG für Hauptbenutzer: Bewegung entlang eines Pfades (SVG nicht erforderlich). Beispiel:

Siehe die Pen-Demo für autoRotate true / false von Sarah Drasner (@sdras) auf CodePen.