CSS offset-anchor Property

Description

The offset-anchor property specifies the point within an element that is treated as the element’s anchor when the element is positioned along a motion path or by offset-based positioning. In practice, that means the anchor point is the part of the element that gets placed on the path or at the offset-position; shifting the anchor changes which pixel of the element is glued to the path and therefore changes the element’s apparent alignment and collision behavior with surrounding content. Because it chooses an internal reference point, offset-anchor is particularly useful for getting a visually natural placement of irregularly shaped or composite elements (for example, aligning a wheel or a pointer tip to a path rather than the element’s geometric center).

Using offset-anchor lets you fine-tune motion so that a specific visual feature follows the path exactly while the rest of the box is offset appropriately. It is commonly used together with the motion-path machinery — for example, offset-path to define the trajectory and offset-position or offset-rotate to control where and how the element moves and orients. Changing the anchor will shift where along that trajectory the element is drawn, so lessons learned when aligning icons, labels, or interactive handles to a path often start with adjusting the anchor before tweaking translations or rotations.

Although offset-anchor determines the anchor for path placement, it is distinct from the origin used by regular transforms: see transform-origin. In many motion scenarios the anchor is used as the reference point for path-based rotation behavior (so orientation around the path will appear to pivot around that anchor), while independent transforms on the element still use their own transform-origin. That distinction matters when you combine transform animations (scale/rotate) with path-following motion: the two origin definitions interact to produce the final visual result.

There are practical considerations when using offset-anchor: percentage-based anchors are interpreted relative to the element’s box, different writing modes or directionality can change the intuitive interpretation of corner-based anchors, and anchor changes during an animation can produce abrupt jumps if not animated smoothly. It also behaves differently depending on how the element is positioned in the document flow (see position for positioning models), so keep layout context in mind when choosing an anchor point for motion or offset effects.

Definition

Initial value: auto
Applies to: transformable elements
Inherited: no
Computed value: relative to the width and the height of the elements reference box
Animatable: a position
JavaScript syntax: object.style.offsetAnchor

Interactive Demo

offset-anchor: auto;

offset-anchor: right top;

offset-anchor: left bottom;

offset-anchor: 20% 80%;

Syntax

offset-anchor: auto | <position>

Values

autooffset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position.
<position>A <position> defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values.

Example

HTML

  <div class="stage">

    <svg class="guide" viewBox="0 0 420 120" aria-hidden="true">

      <path d="M20 60 C150 0, 250 120, 400 60" fill="none" stroke="#e6e6e6" stroke-width="3" />

    </svg>



    <div class="dot dot-default">center</div>

    <div class="dot dot-top-left">top-left</div>

    <div class="dot dot-offset20">20px 10px</div>

  </div>

CSS

  .stage {
    position: relative;
    width: 420px;
    height: 120px;
    margin: 24px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: visible;
  }

  .guide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .dot {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);

    /* shared motion-path settings */
    offset-path: path('M20 60 C150 0, 250 120, 400 60');
    animation: follow 3s ease-in-out infinite alternate;
  }

  /* Visual marker inside each element showing the element's local anchor point (for demonstration only) */
  .dot::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;
  }

  /* Default: anchor at element center */
  .dot-default {
    background: #ff6b6b;
    offset-anchor: center; /* anchor is the element center */
  }
  .dot-default::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Anchor at the top-left corner of the element (0 0) */
  .dot-top-left {
    background: #4ecdc4;
    offset-anchor: 0 0; /* anchor is the element's top-left corner */
    animation-delay: 0.1s;
  }
  .dot-top-left::after {
    left: 0;
    top: 0;
    transform: none;
  }

  /* Anchor defined with explicit offset values (20px from left, 10px from top) */
  .dot-offset20 {
    background: #556270;
    offset-anchor: 20px 10px; /* anchor is 20px right and 10px down from element's top-left */
    animation-delay: 0.2s;
  }
  .dot-offset20::after {
    left: 20px;
    top: 10px;
    transform: none;
  }

  @keyframes follow {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
  }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS offset-anchor property. Hover over a browser icon to see the version that first introduced support for this CSS property.