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>

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.

Browser support

chrome edge firefox safari opera
55.0+ ?

Practice Your Knowledge

What is the purpose of the offset properties in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?