offset-distance

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die offset-distance CSS Eigenschaft spezifiziert eine Position entlang eines offset-path für ein Element, um platziert zu werden.

Probieren Sie es aus

Syntax

css
/* Default value */
offset-distance: 0;

/* the middle of the offset-path */
offset-distance: 50%;

/* a fixed length positioned along the path */
offset-distance: 40px;

/* Global values */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;
<length-percentage>

Eine Länge, die angibt, wie weit das Element entlang des Pfades (definiert mit offset-path) liegt.

100% repräsentiert die Gesamtlänge des Pfades (wenn der offset-path als grundlegende Form oder path() definiert ist).

Formale Definition

Anfangswert0
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebeziehen sich auf die Gesamtlänge des Pfads
Berechneter Wertfor <length> the absolute value, otherwise a percentage
AnimationstypLängenangabe, Prozentsatz oder calc();

Formale Syntax

offset-distance = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Verwendung von offset-distance in einer Animation

Der Bewegungsaspekt in CSS Motion Pfad stammt typischerweise aus der Animation der offset-distance Eigenschaft. Wenn Sie ein Element entlang seines gesamten Pfades animieren möchten, würden Sie dessen offset-path definieren und dann eine Animation einrichten, die die offset-distance von 0% bis 100% nimmt.

HTML

html
<div id="motion-demo"></div>

CSS

css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Ergebnis

Spezifikationen

Specification
Motion Path Module Level 1
# offset-distance-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch