offset-path

Diese Eigenschaft entstand ursprünglich unter dem Namen motion-path. Dieser und alle anderen verwandten motion-*-Eigenschaften werden in der Spezifikation in offset-* umbenannt. Wir ändern die Namen hier im Almanach. Wenn Sie sie sofort verwenden möchten, ist es wahrscheinlich am besten, beide Syntaxen zu verwenden.

Die CSS-Eigenschaft offset-path definiert einen Bewegungspfad, dem ein Element während der Animation folgen soll. Hier ist ein Beispiel mit der SVG-Pfad-Syntax

.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 Eigenschaft motion-offset, um die Animation zu erstellen. Hier ist ein einfaches Beispiel für die Animation von motion-offset 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 den Pen Einfaches Beispiel für Animation auf einem Pfad von CSS-Tricks (@css-tricks) auf CodePen.

In dieser Demo wird der orangefarbene Kreis entlang des in CSS definierten offset-path animiert. Wir haben diesen Pfad tatsächlich in SVG mit exakt denselben path()-Daten *gezeichnet*, aber das ist nicht notwendig, um die Bewegung zu erzielen.

Nehmen wir an, wir haben einen solchen ausgefallenen Pfad in einer SVG-Bearbeitungssoftware gezeichnet

Wir würden einen Pfad wie diesen finden:

<path d="M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z" />

Der Wert des d-Attributs ist das, was wir brauchen, und wir können ihn direkt in CSS übertragen und als offset-path verwenden.

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

Beachten Sie die einheitenlosen Werte in der Pfadsyntax. Wenn Sie das CSS auf ein Element innerhalb von SVG anwenden, verwenden diese Koordinatenwerte das Koordinatensystem, das innerhalb des viewBox dieses SVG eingerichtet ist. Wenn Sie die Bewegung auf ein anderes HTML-Element anwenden, sind diese Werte Pixel.

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

.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

Nach unserem besten Wissen sind path() und none die einzigen *funktionierenden* Werte für offset-path.

Die Eigenschaft offset-path 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 Shapes-Spezifikation an, die Folgendes umfasst:
  • circle()
  • ellipse()
  • inset()
  • polygon()

  Clippy ist übrigens ein fantastisches Werkzeug zum Generieren von Basic Shape-Werten.

• none: Gibt keinen Bewegungspfad an.

Hier sind einige Tests

Siehe den Pen Test der motion-path-Werte von CSS-Tricks (@css-tricks) auf CodePen.

Selbst die Anweisung an ein SVG-Element, einen Pfad innerhalb desselben SVG über url() zu referenzieren, scheint nicht zu funktionieren.

Mit der Web Animations API

Dan Wilson hat sich in Future Use: CSS Motion Paths damit beschäftigt. Sie haben über die Web Animations API Zugriff auf all diese Dinge in JavaScript. Wenn Sie beispielsweise einen offset-path in CSS definiert haben, können Sie die Animation immer noch über JavaScript steuern.

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

Weitere Beispiele

Achtung! Viele davon wurden vor der Umbenennung von motion-* auf offset-* erstellt. Sie sollten recht einfach zu korrigieren sein, wenn Sie dazu neigen.

Siehe den Pen Whoosh! von Merih Akar (@merih) auf CodePen.

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

Siehe den Pen scalextric car on motion-path von Kseso (@Kseso) auf CodePen.

Siehe den Pen CSS Motion Path Airplane von Ali Klein (@AliKlein) auf CodePen.

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

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

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

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

Browser-Unterstützung

Die Eigenschaft offset-path gilt zum Zeitpunkt des Schreibens immer noch als experimentelles Feature. Wenn Sie sie aufgrund mangelnder Browserunterstützung zögern, in einem Projekt zu verwenden, sollten Sie möglicherweise GSAP für diese Art von Animation in Betracht ziehen, die Sarah auch in ihrem Beitrag behandelt. Dies bietet Ihnen derzeit die breiteste Browserunterstützung.

Seit Chrome 46 und Opera 33 (einschließlich der zugehörigen mobilen Versionen) gibt es „anfängliche Unterstützung“ in Blink (ohne Flag).

Gibt es eine andere Möglichkeit, dies zu tun?

Unsere eigene Sarah Drasner schrieb über SMIL, die native Methode von SVG für Animationen, und wie animateMotion verwendet wird, um Objekte entlang eines SVG-Pfads zu animieren. Es sieht so aus:

<animateMotion 
  xlink:href="#lil-guy" 
  dur="3s" 
  repeatCount="indefinite" 
  fill="freeze" 
  path="M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z" />

Aber SMIL wird veraltet! Das ist also nicht empfehlenswert.

GreenSock ist jedoch eine weitere Methode, die empfohlen wird. Sarah spricht darüber in GSAP + SVG für Power-User: Bewegung entlang eines Pfads (SVG nicht erforderlich). Beispiel:

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

Verwandte Eigenschaften

• offset-distance
• offset-rotate
• offset-position
• offset-anchor

Zusätzliche Informationen

• Spezifikation: Motion Path Module Level 1 Spec
• Sammlung von Beispielen auf CodePen
• Zukünftige Verwendung: CSS Motion Paths von Dan Wilson
• Motion Paths – Vergangenheit, Gegenwart und Zukunft von Cassie Evans
• WebKit Ticket #139128
• Mozilla Ticket #1186329
• Feature-Anfrage für Microsoft Edge
• Chrome Platform Status: CSS Motion Path und Beispiel
• MDN: motion (verweist auf die anderen verwandten Eigenschaften)