CSS offset-anchor property
Use the offset-anchor CSS property for specifying the anchor point within the box. Read about property values and practice with examples.
The CSS offset-anchor property sets which point of an element gets attached to the offset path when the element moves along that path. In other words, it answers the question: "As the box travels along the path, which point of the box should follow it — its center, a corner, or somewhere else?"
When you animate an element along a path with offset-distance, the browser needs a reference point on the box to keep on the line. By default that point is the box's center, but offset-anchor lets you move it. This is the path-motion counterpart of transform-origin: instead of choosing the pivot for rotations and scales, you choose the point that rides the path.
Why offset-anchor matters
Without offset-anchor, an element following a path is centered on the line, so half of it spills to each side. By changing the anchor you can:
- Make the top-left corner trace the path (
offset-anchor: 0 0), useful when the path represents the leading edge of an object. - Keep a label or marker tip exactly on the curve while the rest of the box hangs off to one side.
- Fine-tune the alignment of an icon (for example, a car's wheels, an arrow's point, a pin's tip) so it sits naturally on the route it follows.
It only has a visible effect when the element is actually placed on an offset path — set offset-path first, then animate offset-distance. offset-anchor is part of the shorthand offset property.
offset-anchor is part of the experimental CSS Motion Path module. Support is broad in modern browsers, but check current compatibility and provide a graceful fallback (the element simply renders in its normal flow position when the feature is unsupported).
| Initial Value | auto |
|---|---|
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | Motion Path Module Level 1 |
| DOM Syntax | object.style.offsetAnchor = "right top"; |
Syntax
CSS offset-anchor syntax
offset-anchor: auto | <position>;Example of the offset-anchor property:
CSS offset-anchor code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
padding: 0 50px;
width: 100%;
}
svg,
.box {
position: absolute;
}
.box {
animation: move 3s 0ms infinite alternate ease-in-out;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
height: 50px;
width: 50px;
offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
offset-anchor: center;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-anchor property example</h2>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
</svg>
<div class="box"></div>
</body>
</html>In this example the green-and-blue .box follows the same curve drawn by the <svg> track. With offset-anchor: center (the default behavior of auto), the middle of the box stays glued to the line. Try changing it to 0 0 or right bottom to see how a different point of the box rides the path.
Values
offset-anchor accepts the keyword auto or any CSS <position> value — the same kind of value you would use for background-position.
| Value | Description |
|---|---|
auto | The center of the box. |
<position> | <percentage> - A percentage for the horizontal offset is relative to the width of the padding box. A percentage for the vertical offset is relative to the height of the padding box. <length> - A length value gives a length offset from the upper left corner of the padding box of a box. |
initial | Makes the property use its default value. |
inherit | Inherits the property from its parent element. |
When offset-anchor: auto is used, the anchor point takes the value of offset-position (which itself defaults to the box center), so the box is centered on the path.
Related properties
offset-anchor is one piece of the CSS Motion Path toolkit. You will usually combine it with:
offset-path— defines the line or shape the element moves along.offset-distance— how far along the path the element is placed (animate this to make it travel).offset-position— the starting point used whenoffset-pathisnoneor when the anchor isauto.offset-rotate— whether the element rotates to face the direction of travel.offset— the shorthand that sets all of the above at once.