X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS offset-anchor property

The offset-anchor property defines an anchor point of the box along the offset path. The anchor point specifies the point of the box which is the point that is moved along the offset path.

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

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

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 width of 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 box’s content area.

initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

46.0+ x x x 33.0+

Practice Your Knowledge

The offset-anchor property



Do you find this helpful?

Related articles