offset-anchor
Quick Summary for 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.
Code Usage for offset-anchor
/* 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; 
More Details for offset-anchor

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

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
Motion Path Module Level 1 # offset-anchor-property

See also

offset offset-distance offset-rotate SVG <path>

Last modified: Feb 8, 2022, by MDN contributors

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Me
Random CSS Property

order

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.
order css reference