CSS offset-distance Eigenschaft

Die CSS-Eigenschaft offset-distance legt fest, wie weit ein Element entlang seines Bewegungspfads verschoben wird — dem Pfad, der durch die Eigenschaft offset-path definiert wird. Stell dir offset-path als eine Strecke vor und offset-distance als die Position des Elements auf dieser Strecke: 0 platziert es am Anfang, 100% am Ende.

Sie ist eines der Grundelemente von CSS Motion Path, mit dem ein Element entlang einer beliebigen Form (einer Linie, einer Kurve, einem SVG-Pfad) bewegt werden kann, anstatt auf gerade top/left-Übergänge beschränkt zu sein. Für sich allein ist offset-distance statisch, aber die Animation von 0 auf 100% lässt das Element den Pfad entlanggleiten.

Wann verwenden

Ein Element entlang eines kurvenförmigen oder benutzerdefinierten Pfads animieren — ein Flugzeug, das einer Route folgt, eine Perle auf einer Schnur, ein Symbol, das einen Kreis nachzeichnet. Gerade CSS-Übergänge können das nicht; ein Bewegungspfad schon.
Ein Element an einem bestimmten Punkt auf einem Pfad anhalten — setze einen festen Wert wie offset-distance: 50%, um das Element auf halbem Weg entlang seines offset-path zu platzieren.
Scroll- oder interaktionsgesteuerte Bewegung — aktualisiere offset-distance mit JavaScript (oder einer Scroll-Animation), um ein Element als Reaktion auf Benutzereingaben entlang eines Pfads zu bewegen.

offset-distance hat keine Wirkung, wenn das Element keinen offset-path hat. Ohne Pfad gibt es nichts, gegen das der Abstand gemessen werden könnte.

Werte

Es akzeptiert einen einzelnen <length-percentage>:

<length> — ein absoluter Abstand vom Anfang des Pfads, z. B. 40px.
<percentage> — ein Abstand relativ zur Gesamtlänge des Pfads. 0% ist der Anfang, 100% ist das Ende.

Der Anfangswert ist 0.

Info

Negative und über-100%-Werte sind gültig. Ein Wert wie -20% oder 120% erweitert das Element über die Enden des Pfads hinaus; bei einem geschlossenen Pfad wird es umgebrochen. Das ist praktisch, wenn ein Element außerhalb des Pfads beginnen und sich darauf animieren soll.

Warnung

offset-distance ist Teil des experimentellen CSS Motion Path Moduls. In frühen Entwürfen der Spezifikation hieß diese Eigenschaft motion-offset. Prüfe die aktuelle Browser-Unterstützung, bevor du dich in der Produktion darauf verlässt.

Eigenschaft	Wert
Anfangswert	`0`
Gilt für	Transformierbare Elemente
Vererbbar	Nein
Animierbar	Ja
Version	Motion Path Module Level 1
DOM-Syntax	`object.style.offsetDistance = "100%";`

Syntax

offset-distance: <length-percentage>;

Zum Beispiel:

/* A fixed point partway along the path */
offset-distance: 70%;

/* Absolute distance from the start */
offset-distance: 50px;

/* Animate from start to end of the path */
@keyframes move {
  to {
    offset-distance: 100%;
  }
}

Beispiele

Ein Element entlang eines benutzerdefinierten Pfads animieren

Das Element unten hat einen offset-path in Form einer Kurve. Die Animation von offset-distance von seinem Standardwert 0 auf 100% lässt die Box sanft entlang dieses Pfads gleiten. Beachte, dass offset-rotate: reverse die Box so dreht, dass sie in Fahrtrichtung zeigt.

Beispiel mit Haus und Schere

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        top: 100px;
        offset-path: path("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");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Probier es selbst »

Den Abstand als Prozentwert angeben

Hier wird der Wert als Prozentsatz der Gesamtpfadlänge animiert, sodass das Element genau einen vollständigen Durchlauf abschließt, unabhängig davon, wie lang der Pfad ist. Die Verwendung von 100% statt einer absoluten Länge ist die portabelste Methode, um entlang eines Pfads zu animieren.

Beispiel der CSS-Eigenschaft offset-distance

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Probier es selbst »

Akzeptierte Werte

Wert	Beschreibung
`<length-percentage>`	Eine Länge oder ein Prozentsatz, der die Position entlang des Offset-Pfads angibt, gemessen von dessen Anfang.
`initial`	Setzt die Eigenschaft auf ihren Standardwert (`0`).
`inherit`	Erbt den Wert vom übergeordneten Element.

Übung

Was ermöglicht die CSS-Eigenschaft 'offset-distance'?

Sie ermöglicht das Festlegen des Farbverlaufs für einen linearen Farbverlaufshintergrund.Sie ermöglicht das Definieren des Abstands entlang des Pfads, an dem das Element positioniert werden soll.Sie ermöglicht das Festlegen eines Abstands zwischen zwei Elementen.Sie ermöglicht das Festlegen der Drehung eines Elements.Sie ermöglicht das Platzieren eines Elements entlang eines definierten Pfads.