CSS offset-distance Property

What You’ll Learn

The offset-distance property controls how far an element has moved along a motion path. It is the property you animate when you want something to travel from the start to the end of a route.

Introduction

The offset-distance property in CSS is used to define the distance of an element along an offset path.

This property is typically used with offset-path to animate elements along a predefined path, such as a line, curve, or any other shape. By specifying the offset-distance, you can control the position of the element along the path, making it useful for creating dynamic and engaging animations.

Definition and Usage

Think of offset-path as the road and offset-distance as how far the car has driven. A value of 0% keeps the element at the beginning, while 100% places it at the end.

In most tutorials and demos, beginners animate this property because it creates smooth motion without manually calculating coordinates.

📝 Syntax

The syntax for the offset-distance property is simple and allows you to specify the distance as a length or percentage value:

element {
  offset-distance: value;
}

The value can be a length such as 10px or 2em, or a percentage such as 50%.

Basic Example

.dot {
  offset-path: path("M10 10 H 290 V 290 H 10 Z");
  offset-distance: 50%;
}

Syntax Rules

• Define the path first with offset-path.
• Use percentages for start-to-end motion along the full path.
• Use lengths when you need an exact distance from the path start.
• Animate the property with @keyframes for continuous movement.

🎯 Default Value

The default value of the offset-distance property is 0, which means the element starts at the beginning of the offset path.

That is why elements with a path but no distance value appear parked at the route’s starting point.

💎 Property Values

Examples Gallery

Use offset-distance to move elements along lines, rectangles, and curves.

<style>
  .animated {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    offset-path: path("M10 10 H 290 V 290 H 10 Z");
    animation: move 5s infinite linear;
  }

  @keyframes move {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
  }
</style>

<div class="animated"></div>

.marker {
  offset-path: path("M 20,100 L 280,100");
  offset-distance: 50%;
}

.badge {
  offset-path: path("M 10,70 L 250,70");
  offset-distance: 80px;
}

.dot {
  offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
  animation: follow 4s ease-in-out infinite alternate;
}

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

Pair with offset-path and offset-anchor

offset-distance only controls progress along a path. You still need offset-path to define the route, and you may use offset-anchor when the element should sit on the path from a specific point.

.dot {
  offset-path: circle(70px at 120px 80px);
  offset-distance: 0%;
  offset-anchor: center;
  animation: orbit 4s linear infinite;
}

♿ Accessibility

• Respect reduced motion — Disable path animations when prefers-reduced-motion: reduce is set.
• Keep motion decorative — Do not rely on movement alone to communicate important state.
• Avoid endless distracting loops — Subtle motion is easier to read around.
• Provide static fallbacks — Ensure content remains usable if motion path features are unsupported.

💡 Best Practices