CSS offset-anchor Property

What You’ll Learn

The offset-anchor property controls which point inside an element sits on the motion path. It helps path animations look precise instead of floating above or below the route.

Introduction

The offset-anchor property in CSS is part of the CSS Motion Path Module, which allows you to define an animation path for an element. The offset-anchor property specifies the position of the element relative to the path.

This property is particularly useful for creating animations along complex paths, as it allows you to control where the element is anchored on the path.

Definition and Usage

When an element moves along an offset-path, the browser must decide which part of the element touches the path line. That decision is made by offset-anchor.

For example, centering the anchor with 50% 50% makes a square ride smoothly on the path, while top left can make the same square appear to hang below the route.

📝 Syntax

The syntax for the offset-anchor property is:

element {
  offset-anchor: <position>;
}

Here, <position> can be a set of values defining the anchor point relative to the element’s box.

Basic Example

.box {
  offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
  offset-anchor: 50% 50%;
  animation: move 5s infinite alternate;
}

Syntax Rules

• Define a path with offset-path before adjusting the anchor.
• Use keywords, percentages, or lengths like other CSS position values.
• auto is the default and usually works for simple square elements.
• Custom anchors are most helpful for non-square shapes or precise visual alignment.

🎯 Default Value

The default value of the offset-anchor property is auto, which means the element’s position is automatically calculated based on the element’s size and the path.

In many beginner demos, auto and center look similar, but explicit values give you predictable control when the element is wider, taller, or irregularly shaped.

💎 Property Values

Examples Gallery

Adjust the anchor point to control how an element sits on its motion path.

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
    offset-anchor: 50% 50%;
    animation: move 5s infinite alternate;
  }

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

<div class="box"></div>

.marker {
  offset-path: circle(70px at 120px 80px);
  offset-anchor: auto;
  animation: orbit 4s linear infinite;
}

.badge {
  width: 40px;
  height: 24px;
  offset-path: path("M 20,90 C 80,20 140,160 200,90");
  offset-anchor: top left;
  animation: slide 4s ease-in-out infinite alternate;
}

.pin {
  width: 18px;
  height: 18px;
  offset-path: path("M 10,70 L 250,70");
  offset-anchor: bottom center;
  animation: travel 3s linear infinite alternate;
}

Pair with offset-path and offset-distance

offset-anchor does not create motion by itself. You still need a path from offset-path and movement from offset-distance or an animation that changes distance along the route.

.dot {
  offset-path: path("M 10,80 Q 95,10 180,80");
  offset-distance: 0%;
  offset-anchor: center;
}

♿ Accessibility

• Respect reduced motion — Disable or simplify path animations inside prefers-reduced-motion media queries.
• Keep motion decorative — Do not rely on path animation alone to communicate essential information.
• Avoid distracting loops — Continuous motion can make nearby text harder to read.
• Test visual clarity — A poor anchor choice can make motion harder to follow, especially for low-vision users.

💡 Best Practices