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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-distance

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Siehe auch