CSS offset Property

Definition and Usage

The offset property is the Motion Path shorthand. It places a transformable element on a path and controls how far along that path it sits, how it rotates, and which point on the element sticks to the path.

It sets offset-position, offset-path, offset-distance, offset-rotate, and offset-anchor. Animate offset-distance from 0% to 100% to travel the path. It is not inherited, and it creates a stacking context.

CSS Syntax

A common starter is offset: path("M 0 0 L 200 0") 0% auto;. The slash and anchor are optional.

Property Values

Any piece you leave out uses its initial value. The initial path is none, with distance 0 and rotate auto.

How to Use offset

Pick a path, place the element on it, then animate the distance.

1. Choose a path with path(), circle(), or another offset-path value.
2. Set offset (or the longhands) on the moving element. It is not inherited.
3. Animate offset-distance from 0% to 100% with @keyframes.
4. Add auto rotate when the element should face along the path.

Live Preview

A marker sits on a straight path. Change offset-distance to see where it stops along that path.

CSS Examples

Each snippet adds only what offset needs: a path, a distance, and an optional rotate. Use Try It Yourself for a live editor.

<style>
  @keyframes travel {
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset: path("M 20 80 L 280 80") 0% 0deg;
    animation: travel 4s linear infinite;
  }
</style>

<div></div>

<style>
  @keyframes orbit {
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset: path("M 140 80 m -50 0 a 50 50 0 1 1 100 0 a 50 50 0 1 1 -100 0") 0% auto;
    animation: orbit 5s linear infinite;
  }
</style>

<div></div>

<style>
  @keyframes wave {
    to { offset-distance: 100%; }
  }
  div {
    width: 24px;
    height: 24px;
    background: #2563eb;
    offset: path("M 20 100 Q 100 20 180 100 T 340 100") 0% 0deg;
    animation: wave 4s ease-in-out infinite alternate;
  }
</style>

<div></div>

Key Takeaways