offset-anchor

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

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%;
  }
}

Live Result

Specifications

Specification Status Comment
Motion Path Module Level 1
The definition of 'offset-anchor' in that specification.
Working Draft Initial definition
Initial valueauto
Applies totransformable elements
Inheritedno
PercentagesrelativeToWidthAndHeight
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typea position
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-anchor
Experimental
Chrome Full support 79Edge No support NoFirefox Full support 70
Disabled
Full support 70
Disabled
Disabled From version 70: 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 No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also