w3docs logo

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";


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

Example of the offset property:

<!DOCTYPE html>
    <title>Title of the document</title>
      @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;
    <h2>Offset property example</h2>


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.

Browser support

chrome edge firefox safari opera
55.0+ ?
Do you find this helpful?