<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/ &lt;percentage&gt; values /</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> 25% 75%<span class="token punctuation">;</span> <span class="token comment">/ &lt;length&gt; values /</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> 1cm 2cm<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> 10ch 8em<span class="token punctuation">;</span> <span class="token comment">/ Edge offsets values /</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> bottom 10px right 20px<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> right 3em bottom 10px<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">offset-anchor</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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: revert; offset-anchor: unset; 

Values

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.

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

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.

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

Specifications

See also

Last modified: Feb 8, 2022, by MDN contributors