offset-anchor

The offset-anchor CSS property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path.

Syntax

/* 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: 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 valueauto
Applies totransformable elements
Inheritedno
PercentagesrelativeToWidthAndHeight
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typea position

Formal syntax

auto | <position>

where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

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

<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

Specifications

Specification Status Comment
Motion Path Module Level 1
The definition of 'offset-anchor' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-anchorChrome Full support 79Edge Full support 79Firefox Full support 72
Full support 72
No support 70 — 72
Disabled
Disabled From version 70 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android Full support 79Chrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 12.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

See also