CSS-Eigenschaft offset

Die Eigenschaft offset animiert ein Element entlang des angegebenen Pfades.

Es ist eine Abkürzung für die folgenden Eigenschaften:

Die Eigenschaft offset wurde in der früheren Spezifikation als "motion" bezeichnet.

Bei dieser Eigenschaft handelt es sich um eine experimentelle Technologie.
Anfangswert auto none 0 auto auto
Gilt für Transformierbare Elemente
Geerbt 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 | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft offset</h2>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
offset-position Gibt die Anfangsposition des Offsetpfades an.
offset-path Gibt einen Bewegungspfad, dem ein Element folgen soll, an.
offset-distance Gibt die Position entlang des Offsetpfades an.
offset-anchor Definiert einen Ankerpunkt der Box entlang des Offsetpfades.
offset-rotate Gibt die Ausrichtung eines Elements an.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

55.0+ ?


Finden Sie das nützlich?

Ähnliche Artikel