CSS offset-anchor Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The offset-anchor CSS property specifies the point inside the box of an element traveling along an offset-path that is actually moving along the path. This point is also the center of rotation if the element is rotated with the offset-rotate property. The offset-anchor property 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. The offset-anchor property is used in conjunction with the offset-path property to animate elements along a defined path. The offset-path property specifies the path that the element should follow, and the offset-anchor property specifies the point on the element that should be fixed to the path.

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

<section>

  <div class="offset-anchor1"></div>

</section>

<section>

  <div class="offset-anchor2"></div>

</section>

<section>

  <div class="offset-anchor3"></div>

</section>

CSS

div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Result

Editor