📍 CSS offset-distance — Complete Tutorial

The CSS offset-distance property controls **how far along an offset-path** an element is positioned. It is used together with offset-path to animate elements along curves, lines, circles, or custom SVG-like paths.

>>“offset-distance determines the element’s exact position along the motion path — from 0% to 100%.”

Note

✔ Works only when offset-path is defined
✔ Accepts percentages or lengths
✔ Used heavily in motion-path animations
✔ Supported in all modern browsers

📦 Syntax

offset-distance syntax

offset-distance: <percentage> | <length>;

/* Examples */
offset-distance: 0%;     /* start of the path */
offset-distance: 100%;   /* end of the path */
offset-distance: 50%;    /* halfway */
offset-distance: 40px;   /* fixed distance */
ValueDescription
0%Start of the path
100%End of the path
Length (px)Absolute distance along the path

🎨 1. Basic Example

Basic usage

.item {
  offset-path: path("M0,0 L200,100");
  offset-distance: 40%;
}

The element appears 40% along the diagonal path.

🎨 2. Animate Along a Path

Animation

.ball {
  offset-path: path("M0,0 C100,0 150,100 250,80");
  animation: move 3s linear infinite;
}

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

The ball follows a curved motion path using offset-distance.

🎨 3. Using Pixels Instead of Percentages

px example

.dot {
  offset-path: path("M0,0 L300,0");
  offset-distance: 120px;
}

The element is placed exactly 120px from the start of the path.

🎨 4. Bounce Animation Along Path

Bounce motion

.bubble {
  offset-path: path("M0,100 C80,0 160,200 240,100");
  animation: bounce 2s ease-in-out infinite alternate;
}

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

The element bounces back and forth along the curved path.

🎨 5. Combine offset-distance + offset-rotate

Follow direction

.car {
  offset-path: path("M0,0 L300,60 L350,150");
  offset-rotate: auto;
  animation: drive 4s ease infinite;
}

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

The element rotates automatically to face the direction of the path.

🎨 6. Looping Animation

Loop

.orbit {
  offset-path: path("M100,50 A50,50 0 1 1 99,50");
  animation: orbit 3s linear infinite;
}

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

Perfect for orbit animations or circular loaders.

📌 Related Motion Path Properties

PropertyDescription
offset-pathDefines the curve/line/circle to follow
offset-rotateRotate element along the path
offset-anchorDefines how the element is positioned relative to the path

🧪 Real-World Use Cases

1️⃣ Airplane Flight Animation

plane

.plane {
  offset-path: path("M0,50 C200,0 300,100 450,40");
  offset-rotate: auto;
  animation: fly 5s linear infinite;
}

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

2️⃣ Polygon Navigation

polygon path

.nav {
  offset-path: path("M0,0 L200,0 L200,200 L0,200 Z");
  animation: loop 6s linear infinite;
}

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

3️⃣ Floating Bubble Animation

bubble

.bubble {
  offset-path: ray(90deg farthest-side);
  animation: float 3s ease-out infinite;
}

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

⚠️ Common Mistakes

  • ❌ Using offset-distance without defining offset-path
  • ❌ Forgetting to animate offset-distance for motion
  • ❌ Expecting rotation without offset-rotate
  • ❌ Using invalid SVG path syntax inside path()

Note

Always animate offset-distance when creating motion-path animations.

🔥 Summary

offset-distance defines where an element is along a motion path. Combined with offset-path and offset-rotate, it creates complex, realistic motion animations that go beyond simple sliding or translating.

  • offset-path defines the trajectory
  • offset-distance defines progress
  • offset-rotate defines orientation
>>“Motion-path animations give CSS movement personality — offset-distance makes them come alive.”