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!

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

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

<section>
<div class="offset-anchor1"></div>
</section>
<section>
<div class="offset-anchor2"></div>
</section>
<section>
<div class="offset-anchor3"></div>
</section>
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%;
  }
}

Browser Support

The following table will show you the current browser support for the CSS offset-anchor property.

Desktop
Edge Chrome Firefox Opera Safari
11611672x?
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
11679XXX116

Last updated by CSSPortal on: 3rd January 2024