CSS Motion Path

Imagine a bead threaded onto a curvy piece of wire. As you push the bead along the wire, it follows the wire's exact curve instead of moving in a straight line. CSS Motion Path lets you attach an element to a custom path -- a curve, a circle, or an SVG shape -- so the element glides along it automatically, rotating to match the direction of travel as it moves.

In this page:

Defining a Track with offset-path
Positioning Along the Path with offset-distance
Orienting the Element with offset-rotate
Setting the Pivot with offset-anchor
The offset Shorthand

Defining a Track with offset-path

offset-path draws an invisible track for an element to travel along, defined using shapes like circle(), ellipse(), or a literal SVG path() string. Nothing moves until you also set offset-distance, since offset-path only declares the route, not the position on it.

Note: Start with a simple path() shape copied from an SVG editor before attempting hand-written curves.

Warning: An element with offset-path but no offset-distance will appear to do nothing, since it defaults to the path's starting point.

Example: Defining a Track with offset-path

css

<style>
.box {
  width: 40px;
  height: 40px;
  background: coral;
  offset-path: circle(80px at 100px 100px);
}
</style>
<div class="box">Track defined, but nothing moves yet</div>

Positioning Along the Path with offset-distance

offset-distance sets how far along the offset-path the element currently sits, expressed as a percentage (0% is the start, 100% is the end) or an absolute length. Animating this value from 0% to 100% is what actually produces the gliding motion along the track.

Note: Animate offset-distance inside a @keyframes rule to make an element travel smoothly along its path over time.

Warning: Setting offset-distance above 100% on a non-closed path has no further effect, since the element simply stops at the path's end.

Example: Positioning Along the Path with offset-distance

css

<style>
.box {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 50%;
}
</style>
<div class="box">Sits halfway along the path</div>

Orienting the Element with offset-rotate

By default, an element traveling along a path automatically rotates to face the direction it is moving, as if steering a car around a curve. offset-rotate lets you override this: set it to a fixed angle to keep the element's orientation constant, or add an offset on top of the automatic rotation.

Note: Use offset-rotate: 0deg when you want an element like a text label to stay upright regardless of the path's curve.

Warning: Combining a fixed offset-rotate angle with a sharply curving path can make the element appear to move sideways or backwards.

Example: Orienting the Element with offset-rotate

css

<style>
.label {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 25%;
  offset-rotate: 0deg;
}
</style>
<div class="label">Stays upright regardless of the path's curve</div>

Setting the Pivot with offset-anchor

offset-anchor chooses which point inside the element is aligned with the path, similar to how transform-origin sets a pivot for rotation. By default this is the element's center, but you can shift it to an edge or corner so a specific part of the element rides exactly on the line.

Note: Use offset-anchor: top when animating a pin-shaped icon so its tip, not its center, tracks the path precisely.

Warning: Forgetting to adjust offset-anchor on a large element can make it look like it is floating off the path rather than following it.

Example: Setting the Pivot with offset-anchor

css

<style>
.pin {
  offset-path: circle(80px at 100px 100px);
  offset-distance: 25%;
  offset-anchor: top;
}
</style>
<div class="pin">The tip, not the center, rides exactly on the line</div>

The offset Shorthand

offset is the shorthand property that combines offset-path, offset-distance, offset-rotate, and offset-anchor into a single declaration, in a similar spirit to how the background or font shorthands bundle related longhands together. It keeps motion-path rules compact once you are comfortable with each individual piece.

Note: Reach for the offset shorthand once you understand the four longhands individually, since debugging shorthand typos is harder than debugging one property at a time.

Warning: Omitting a value from the offset shorthand resets that piece to its initial value, which can silently undo a longhand you set earlier in the stylesheet.

Example: The offset Shorthand

css

<style>
.box {
  offset: circle(80px at 100px 100px) 50% 0deg;
}
</style>
<div class="box">Path, distance, and rotation in one declaration</div>

Common Mistakes

Forgetting to define a starting offset-distance, so the element sits at the very start of the path with no visible motion until animated.
Leaving offset-rotate at its default and expecting the element to stay upright, when auto rotation is what makes it follow the curve naturally.
Using an SVG path string with the wrong coordinate space, causing the element to travel outside the visible viewport.

Chapter Summary

offset-path defines the invisible track (a shape, ray, or SVG path) that an element travels along.
offset-distance controls how far along that track the element currently sits, and can be animated for smooth motion.
offset-rotate and offset-anchor fine-tune the element's orientation and pivot point as it moves along the path.

Browser Support

CSS Motion Path (offset-path, offset-distance, offset-rotate) is supported in all modern Chromium and Firefox browsers; Safari support for complex path shapes is more limited.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Math Functions Next Lesson → CSS @supports