CSS offset-Eigenschaft

Die offset-Eigenschaft animiert ein Element entlang des angegebenen Pfads.

Sie ist eine Kurzschreibweise für die folgenden Eigenschaften:

In der früheren Spezifikation wurde die offset-Eigenschaft als „motion“ bezeichnet.

WARNING

Diese Eigenschaft ist eine experimentelle Technologie.

Anfangswert	auto none 0 auto auto
Anwendbar auf	Transformierbare Elemente.
Vererbt	Nein.
Animierbar	Ja.
Version	Motion Path Module Level 1
DOM-Syntax	Object.style.offset = "auto";

Syntax

CSS offset-Eigenschaft

css

offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;

Beispiel für die offset-Eigenschaft:

CSS offset-Eigenschaft

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung
offset-position	Gibt die Anfangsposition des Offset-Pfads an.
offset-path	Gibt einen Bewegungspfad vor, dem ein Element folgen soll.
offset-distance	Gibt die Position entlang des Offset-Pfads an.
offset-anchor	Definiert einen Ankerpunkt des Elements entlang des Offset-Pfads.
offset-rotate	Gibt die Ausrichtung eines Elements an.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

Was ist der Zweck der offset-Eigenschaften in CSS?

Sie dienen dazu, die Eigenschaften shape-outside und clip-path zu definieren.Sie definieren die Textfarbe in CSS.Sie werden für die spezifische Größenanpassung von Elementen verwendet.Sie ermöglichen das Positionieren eines Elements außerhalb des normalen Flusses.Sie werden verwendet, um spezielle Effekte auf ein Objekt anzuwenden.

CSS offset-Eigenschaft ​

Syntax ​

Beispiel für die offset-Eigenschaft: ​

Werte ​

Practice ​

CSS offset-Eigenschaft

Syntax

Beispiel für die offset-Eigenschaft:

Werte

Practice