CSS offset Property

The offset property animates an element along the specified path.

It is a shorthand property for the following properties:

The offset property was called "motion" in the earlier specification.

This property is an experimental technology.

Initial Value	auto none 0 auto auto
Applies to	Transformable elements.
Inherited	No.
Animatable	Yes.
Version	Motion Path Module Level 1
DOM Syntax	Object.style.offset = "auto";

Syntax

offset: offset-position / offset-path / offset-distance / offset-anchor / offset-rotate | initial | inherit;

Example of the offset property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes move {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      div {
        width: 60px;
        height: 60px;
        background-color: #8ebf42;
        offset: path("M 100 100 L 300 100 L 200 300 z") auto;
        animation: move 4s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Offset property example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
offset-position	Specifies the initial position of the offset path.
offset-path	Specify a movement path for an element to follow.
offset-distance	Specifies the position along the offset-path.
offset-anchor	Defines an anchor point of the box along the offset path.
offset-rotate	Specifies the orientation of an element.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.