CSS offset-anchor property

❮ Prev Next ❯

The offset-anchor property defines the anchor point of a box along the offset path. An offset path is considered to be either a geometry of a basic shape that hasn’t been styled or a path consisted of one or more sub-paths. The anchor point specifies the point of the box which is the point that is moved along the offset path.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

This offset property is an experimental technology.

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

offset-anchor: auto | <position>;

Example of the offset-anchor property:

<!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");
      }
      @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>

Try it Yourself »

Values

Value	Description
auto	Takes the value of offset-position provided that the offset position is not "auto" and offset-path is "none".
<position>	<percentage>- A percentage for the horizontal offset is relative to the width of the content area. A percentage for the vertical offset is relative to the height of the content area. <length>- A length value gives a length offset from the upper left corner of the content area of a box.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.