offset-distance

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

Syntax

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

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

/* a fixed length positioned along the path */
offset-distance: 40px;
<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

<length-percentage>

where
<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

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

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 Status Comment
Motion Path Module Level 1
The definition of 'offset-distance' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-distanceChrome Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Edge Full support 79
Full support 79
Full support 79
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Firefox Full support 72
Full support 72
No support 69 — 72
Disabled
Disabled From version 69 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 42
Full support 42
Full support 33
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Safari No support NoWebView Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Chrome Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Firefox Android No support NoOpera Android Full support 42
Full support 42
Full support 33
Alternate Name
Alternate Name Uses the non-standard name: motion-distance
Safari iOS No support NoSamsung Internet Android Full support 6.0
Full support 6.0
Full support 5.0
Alternate Name
Alternate Name Uses the non-standard name: motion-distance

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.