← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 11 of 25

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:

  1. Defining a Track with offset-path
  2. Positioning Along the Path with offset-distance
  3. Orienting the Element with offset-rotate
  4. Setting the Pivot with offset-anchor
  5. The offset Shorthand
Syntax
css 
selector {
  offset-path: path("M x y ...");
  offset-distance: percentage;
  animation: animation-name duration;
}

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.
  • Accepted values:
  • none — default, no motion path
  • path('M 0 0 L 100 100') — an SVG path
  • circle() | ellipse() | polygon() — basic shapes
  • ray(<angle>) — a straight line at an angle
  • url(#svg-shape) — references an SVG element
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • offset-distance: 0% — start of the path (default)
  • offset-distance: 100% — end of the path
  • offset-distance: <length> — absolute distance along the path
  • offset-distance: <percentage> — proportion of the path length
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • offset-rotate: auto — default, faces the path direction
  • offset-rotate: reverse — faces backward
  • offset-rotate: <angle> — a fixed angle
  • offset-rotate: auto <angle> — path direction plus an offset
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • offset-anchor: auto — default, uses transform-origin
  • offset-anchor: center — pivot at the middle
  • offset-anchor: <position> — e.g. top left
  • offset-anchor: <length> <length> — explicit point
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • offset: <path> <distance> <rotate> — path, distance, rotation order
  • offset: path('...') 50% auto — typical use
  • offset: <position> <path> ... / <anchor> — optional start position first, optional anchor after a slash
  • offset: none — resets
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>
Live Example
Related Topics

CSS Clip Path · CSS Math Functions · CSS @supports · CSS Masking

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to define a starting offset-distance, so the element sits at the very start of the path with no visible motion until animated.
  2. Leaving offset-rotate at its default and expecting the element to stay upright, when auto rotation is what makes it follow the curve naturally.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.