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.

The offset-distance CSS property specifies a position along an offset-path for an element to be placed.

Try it

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>

A length that specifies how far the element is along the path (defined with offset-path).

100% represents the total length of the path (when the offset-path is defined as a basic shape or path()).

Formal definition

Initial value0
Applies totransformable elements
Inheritedno
Percentagesrefer to the total path length
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typea length, percentage or calc();

Formal syntax

offset-distance = 
<length-percentage>

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

Examples

Using offset-distance in an animation

The motion aspect in CSS Motion Path typically comes from animating the offset-distance property. If you want to animate an element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to 100%.

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%;
  }
}

Result

Specifications

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

Browser compatibility

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.

See also