CSS offset-Eigenschaft - Werte, Syntax, Beispiele

Die CSS-Eigenschaft offset bewegt ein Element entlang eines selbst definierten Pfades, anstatt es auf den geraden horizontalen bzw. vertikalen Achsen zu verschieben, wie es top/left oder transform: translate() tun. Sie bildet die Grundlage des Motion Path-Features: Sie geben einem Element eine Form vor, der es folgen soll (ein Kreis, ein SVG-Pfad, der Rand seines Containers), und verschieben es dann um eine festgelegte Distanz entlang dieser Form. Animieren Sie diese Distanz, und das Element durchläuft den Pfad.

Diese Seite erklärt, was offset ist, die fünf Langform-Eigenschaften, die es bündelt, seine Syntax sowie ausführbare Beispiele. Verwenden Sie es, wenn ein Element einer Kurve oder einer beliebigen Kontur folgen soll — zum Beispiel eine Markierung, die eine Route auf einer Karte nachzeichnet, ein Symbol, das ein Logo umkreist, oder Text, der sanft an einer Welle entlanggleitet.

Wofür `offset` eine Kurzschreibweise ist

offset setzt fünf Langform-Eigenschaften in einer einzigen Deklaration. Jede steuert einen anderen Teil der Bewegung:

offset-path — die Form, der das Element folgt (ein SVG-path(), circle(), ray() oder die Kontur des Containers).
offset-distance — wie weit entlang des Pfades sich das Element aktuell befindet (0% ist der Anfang, 100% ist das Ende). Dies ist der Wert, den Sie üblicherweise animieren.
offset-position — der Ausgangspunkt, der verwendet wird, wenn offset-path eine Form ohne eigenen Ursprung ist.
offset-anchor — welcher Punkt des Elements am Pfad fixiert ist (sein Mittelpunkt, eine Ecke usw.).
offset-rotate — ob sich das Element in Richtung der Bewegung dreht.

Da offset eine Kurzschreibweise ist, wird jede nicht angegebene Langform-Eigenschaft auf ihren Initialwert zurückgesetzt. Deshalb animieren die meisten echten Animationen offset-distance direkt (damit Pfad und Ankerpunkt unverändert bleiben, während sich nur die Position ändert).

Info

Die Eigenschaft offset wurde in einer früheren Version der Spezifikation motion genannt. In älteren Artikeln findet man möglicherweise noch motion-path und motion-offset — das sind die veralteten Namen für offset-path und offset-distance.

Warnung

Dies ist eine experimentelle Technologie. Prüfen Sie die aktuelle Browser-Unterstützung, bevor Sie diese in der Produktion einsetzen, und stellen Sie einen sinnvollen Fallback bereit (z. B. eine einfache transform-Animation) für Browser, die Motion Paths nicht unterstützen.

Initialwert	auto none 0 auto auto
Gilt für	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	Motion Path Module Level 1
DOM-Syntax	Object.style.offset = "auto";

Syntax

offset: offset-position offset-path offset-distance offset-anchor / offset-rotate;

Das / trennt die positionsbezogenen Werte von offset-rotate. In der Praxis schreibt man selten alle fünf auf einmal. Die gebräuchlichen Formen sind:

/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;

/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");

/* Reset everything to defaults */
offset: initial;

auto nach dem Pfad entspricht offset-rotate: auto, was das Element in Bewegungsrichtung ausrichtet — praktisch für Pfeile oder Fahrzeuge.

Beispiel: Ein Element entlang eines dreieckigen Pfades animieren

Das Element unten folgt einem Dreieck. Die @keyframes-Regel animiert offset-distance von 0% bis 100%, sodass der Kasten den Pfad endlos durchläuft.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes move {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      div {
        width: 60px;
        height: 60px;
        background-color: #8ebf42;
        offset: path("M 100 100 L 300 100 L 200 300 z") auto;
        animation: move 4s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Offset property example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel: Ein Symbol um einen Punkt kreisen lassen

Ein circle()-Pfad lässt ein Element auf einem Ring wandern. Das Setzen von offset-rotate: 0deg hält es aufrecht, anstatt es mit der Kurve zu neigen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes orbit {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      .planet {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1c87c9;
        offset-path: circle(80px at 150px 150px);
        offset-rotate: 0deg;
        animation: orbit 5s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Orbit example</h2>
    <div class="planet"></div>
  </body>
</html>

Werte

Wert	Beschreibung
offset-position	Der Ausgangspunkt des Pfades, wenn die Pfadform keinen eigenen Ursprung hat.
offset-path	Die Form, der das Element folgt — ein SVG-`path()`, `circle()`, `ray()` oder die Containerkontur.
offset-distance	Wie weit das Element entlang des Pfades sitzt, von `0%` (Anfang) bis `100%` (Ende). Der Wert, den Sie typischerweise animieren.
offset-anchor	Der Punkt des Elements, der am Pfad fixiert ist (Standard: `auto`, der `transform-origin` des Elements).
offset-rotate	Wie sich das Element entlang des Pfades dreht: `auto` zeigt in Bewegungsrichtung, `0deg` bleibt aufrecht.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was ist der Zweck der offset-Eigenschaften in CSS?

Sie werden verwendet, um die shape-outside- und clip-path-Eigenschaft zu definieren.Sie definieren die Textfarbe in CSS.Sie werden für die spezifische Größenbestimmung von Elementen verwendet.Sie ermöglichen die Positionierung eines Objekts außerhalb des normalen Flusses.Sie werden verwendet, um Spezialeffekte auf ein Objekt anzuwenden.

Wofür offset eine Kurzschreibweise ist