CSS offset-distance Property

The offset-distance property is used to specify the position along the offset-path.

It accepts the following values: "length" and "percentages". The default value is 0.

INFO

Negative values are valid.

WARNING

This offset property is an experimental technology.

In early versions of the specification, this property was called motion-offset.

Initial Value	0
Applies to	Transformable elements.
Inherited	No.
Animatable	Yes.
Version	Motion Path Module Level 1
DOM Syntax	object.style.offsetDistance = "100%";

Syntax

CSS offset-distance property

css

offset-distance: &lt;length-percentage&gt;;

Example of the offset-distance property:

Example represented with House and Scissors

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Example of the offset-distance property specified in percentage:

Example of the CSS offset-distance property

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Values

Value	Description
`<length-percentage>`	Both length and percentage specify the starting position of the offset path to the end position.

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

Practice

What does the CSS 'offset-distance' property allow you to do?

It allows you to set the gradient for a linear gradient background.It allows you to define the distance along the path for the element to be positioned.It allows you to set a margin between two elements.It allows you to set the rotation of an element.It allows you to place an item along an identified path.

CSS offset-distance Property ​

Syntax ​

Example of the offset-distance property: ​

Example of the offset-distance property specified in percentage: ​