CSS offset-distance Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The offset-distance property controls where an element is placed along a motion path by specifying a distance measured along that path. It does not itself define the path; instead it references the path established by offset-path and moves the element to the corresponding point on that path. In practice this property turns a static element into one that can be positioned anywhere along a curve or line without altering the document’s normal flow geometry — the visual placement is applied as an offset relative to the element’s normal position.

When combined with rotation and anchoring controls the visual result becomes more natural and predictable. For example, offset-rotate controls how the element’s orientation is adjusted to match the tangent of the path (or to remain fixed), and offset-anchor changes which point on the element is aligned to the path point (for instance its center or an edge). Together these properties allow you to place an element precisely on a path and determine how it should pivot or align as it moves, enabling effects like cars following a road, labels that follow a curve, or decorative motion that keeps a consistent visual relationship to the path.

offset-distance is frequently animated — either via transitions or by keyframe animations — to create smooth motion along the path. Because the property describes a position along a geometry, user agents interpolate values along that geometry to produce continuous movement; this makes it ideal for choreographing motion in UI animations, storytelling, or micro-interactions. The resulting visual offset composes with other transforms, so you can combine it with regular transforms and expect to refine an element’s final placement and rotation with the usual transform pipeline; see transform when layering other transformations.

When using offset-distance in production, consider how the visual-only repositioning affects interaction and accessibility: moving an element visually does not necessarily change its logical position in the DOM or how assistive technologies traverse content. Also be mindful of motion preferences—provide alternatives or reduced-motion options for users who prefer less animation. Overall, offset-distance is a powerful way to animate and position elements along arbitrary paths while keeping control over orientation and alignment through the related offset properties.

Definition

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 class="stage">

    <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">

        <path id="path" d="M20 200 C150 10 270 350 400 200" />

    </svg>

    <div class="dot" aria-hidden="true"></div>

</div>

CSS

.stage {
    width: 420px;
    height: 300px;
    margin: 40px auto;
    background: linear-gradient(180deg, #f9f9fb, #ffffff);
    border: 1px solid #e6e6f0;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 6px 20px rgba(20, 20, 50, 0.05);
    overflow: visible;
}

svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

path {
    fill: none;
    stroke: #d0d7ff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dot {
    width: 22px;
    height: 22px;
    background: #ff6b6b;
    border: 3px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    offset-path: path('M20 200 C150 10 270 350 400 200');
    offset-rotate: auto;
    offset-distance: 0%;
    transform: translate(-50%, -50%);
    animation: follow 4s linear infinite;
    will-change: offset-distance, transform;
    box-shadow: 0 6px 16px rgba(100, 80, 120, 0.12);
}

@keyframes follow {
    0% {
        offset-distance: 0%;
    }
    50% {
        offset-distance: 50%;
    }
    100% {
        offset-distance: 100%;
    }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS offset-distance property. Hover over a browser icon to see the version that first introduced support for this CSS property.