offset-distance

Die CSS-Eigenschaft motion-offset besagt: Wie weit entlang des motion-path befinden Sie sich? Dies ist die **animierbare** Eigenschaft, die mit Bewegungsbahnen verbunden 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 anfänglichen Wert von motion-offset auf 0% gesetzt, obwohl es sich lohnt zu erwähnen, dass Null der Standardwert ist, auch wenn er nicht explizit definiert ist (wir hätten ihn auch weglassen können).

Variablen

Die Eigenschaft offset-distance akzeptiert die folgenden Werte

• length (Länge)
• percentage (Prozentwert)

In beiden Fällen gibt der Wert die Distanz vom Startpunkt des Pfades (Standard ist 0px oder 0%) bis zum Endpunkt des Pfades an.

Beispiel

In diesem Beispiel haben wir zwei Kreise, bei denen ein kleiner Kreis entlang des Pfades eines größeren Kreises fährt.

Hier ist die SVG-Datei, die wir zur Zeichnung der Formen verwenden

<svg viewbox="0,0 10,10" width="200px" height="200px">
  
  <!-- the circle path to be animated along -->  
  <path 
    class="track"
    fill="none"
    stroke-width="0.25"
    d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
  />
  
  <!-- the mover that follows the path -->
  <circle class="marker" r="1" fill="orange"></circle>
  
</svg>

Nun können wir die Klasse .marker in unserem CSS so einstellen, dass sie den Koordinaten der Klasse .track folgt

/* 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%; }
}

Siehe den Pen Einfaches Beispiel für Animationen auf einem Pfad von Geoff Graham (@geoffgraham) auf CodePen.

Ebenso können wir den Wert offset-distance bei 50 % stoppen, und die Animation würde auf halbem Weg um den Pfad abfallen

Siehe den Pen Einfaches Beispiel für Animationen auf einem Pfad von Geoff Graham (@geoffgraham) auf CodePen.

Oder, um die Geschwindigkeit der Animation zu steuern, könnten wir den Wert von offset-distance mit 300 % multiplizieren, um die Dinge zu beschleunigen. Wenn wir jedoch die Dauer der Animation auf einen Wert größer als die Zeit festgelegt haben, die das Element benötigt, um den Pfad zurückzulegen, stoppt die Bewegung, bis die Animation ihr Intervall abgeschlossen hat, bevor sie sich wiederholt.

Siehe den Pen Einfaches Beispiel für Animationen auf einem Pfad von Geoff Graham (@geoffgraham) auf CodePen.

Browser-Unterstützung

Die Eigenschaft offset-distance gilt zum Zeitpunkt der Erstellung dieses Textes noch als experimentelle Funktion, und es gibt keine Dokumentation zur Browserunterstützung. Es gibt jedoch Dokumentation zur Unterstützung von motion-path, und wir können diese vorerst als Basis verwenden.

Verwandte Eigenschaften

• offset-path
• offset-rotation
• offset-position
• offset-anchor

Zusätzliche Informationen

• Motion Path Module Level 1 Spezifikation
• Beispiele auf CodePen
• WebKit Ticket #139128
• Mozilla Ticket #1186329
• Feature-Anfrage für Microsoft Edge