CSS-Eigenschaft offset-distance

Die Eigenschaft offset-distance gibt die Position entlang offset-path an.

Es akzeptiert die folgenden Werte: "length" und "percentages". Der Standardwert ist 0.

Negative Werte sind gültig.

Diese Eigenschaft offset ist eine experimentelle Technologie.

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

Syntax

offset-distance: <length-percentage>;

Beispiel

<!DOCTYPE html>
<html>
  <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>
  <body>
    <h2>Beispiel für die Eigenschaft offset-distance</h2>
    <div class="mover"></div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel mit der Eigenschaft offset-distance:

Beispiel

<!DOCTYPE html>
<html>
  <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>
  <body>
    <h2>Beispiel für die Eigenschaft offset-distance</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>

Versuch es selber!

Werte

Wert	Beschreibung
<length-percentage>	Sowohl Länge als auch Prozentsatz geben die Startposition des Offsetpfades zur Endposition an.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.