CSS offset-distance Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

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

<div id="motion-demo"></div>
#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%;
  }
}

Browser Support

The following table will show you the current browser support for the CSS offset-distance property.

Desktop
Edge Chrome Firefox Opera Safari
79557242?
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
557942x655

Last updated by CSSPortal on: 3rd January 2024