CSS offset-distance Property

Description

The offset-distance CSS property specifies a position along an offset-path for an element to be placed. It is used in conjunction with the offset-path property, which defines the path that the element will follow. The offset-distance property can be specified as a percentage of the total length of the path, or as an absolute length. A value of 0% places the element at the start of the path, while a value of 100% places the element at the end of the path. Negative values are also allowed, and will place the element before the start of the path. The offset-distance property can be used to create animations, or to simply position an element along a path. For example, you could use it to create a car animation that follows a road, or to position a product image along a curved line.

Initial value: 0
Applies to: transformable elements
Inherited: no
Computed value: for <length> the absolute value, otherwise a percentage
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.offsetDistance

Interactive Demo

offset-distance: 0%;

offset-distance: 80%;

offset-distance: 50px;

Syntax

offset-distance: <length-percentage>

Values

<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()).

Example

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

Editor