offset-anchor
=============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
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.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/\* <percentage> values \*/
offset-anchor: 25% 75%;

/\* <length> values \*/
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/\* Edge offsets values \*/
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/\* Global values \*/
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: revert-layer;
offset-anchor: unset;
```

### Values

`auto`

`offset-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. For more specifics, see the `<position>` and `background-position` reference pages. Note that the 3-value position syntax does not work for any usage of `<position>`, except for in `background(-position)`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | transformable elements |
| Inherited | no |
| Percentages | relative to the width and the height of the element's reference box |
| Computed value | for `<length>` the absolute value, otherwise a percentage |
| Animation type | a position |

Formal syntax
-------------
```

offset-anchor =   
  auto        |  
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting various offset-anchor values

In the following example, we have three `<div>` elements nested in `<section>` elements. Each `<div>` is given the same `offset-path` (a horizontal line 200 pixels long) and animated to move along it. The three are then given different `background-color` and `offset-anchor` values.

Each `<section>` has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the `<div>`'s offset paths are running.

This allows you to see what effect the different `offset-anchor` values have — the first one, `auto`, causes the `<div>`'s center point to move along the path. The other two cause the `<div>`'s top-right and bottom-left points to move along the path, respectively.

#### HTML


```html
<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>
```


#### CSS


```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

Specifications
--------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-anchor-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `offset`
* `offset-distance`
* `offset-rotate`
* SVG `<path>`