CSS offset Property - Values, Syntax, Examples

The CSS offset property moves an element along a path you define, rather than along the straight horizontal/vertical axes that top/left or transform: translate() use. It is the foundation of the Motion Path feature: you give an element a shape to follow (a circle, an SVG path, the edge of its container), then move it a chosen distance along that shape. Animate that distance and the element travels the path.

This page covers what offset is, the five longhand properties it bundles, its syntax, and runnable examples. Use it when you want an element to follow a curve or arbitrary outline — for example a marker tracing a route on a map, an icon orbiting a logo, or text gliding along a wave.

What `offset` is a shorthand for

offset sets five longhand properties in one declaration. Each controls a different part of the motion:

offset-path — the shape the element follows (an SVG path(), circle(), ray(), or the container's outline).
offset-distance — how far along that path the element currently sits (0% is the start, 100% is the end). This is the value you usually animate.
offset-position — the starting point used when offset-path is a shape without its own origin.
offset-anchor — which point of the element is glued to the path (its center, a corner, etc.).
offset-rotate — whether the element rotates to face the direction of travel.

Because offset is a shorthand, any longhand you leave out is reset to its initial value. That is why most real animations animate offset-distance directly (so the path and anchor stay put while only the position changes).

Info

The offset property was called motion in an earlier version of the specification. You may still see motion-path and motion-offset in old articles — those are the deprecated names for offset-path and offset-distance.

Warning

This is an experimental technology. Check current browser support before relying on it in production, and provide a sensible fallback (such as a plain transform animation) for browsers that don't support motion paths.

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;

The / separates the position-related values from offset-rotate. In practice you rarely write all five at once. The common forms are:

/* Follow an SVG path, facing the direction of travel */
offset: path("M 100 100 L 300 100 L 200 300 z") auto;

/* Just the path; control distance with a separate animation */
offset-path: path("M 0 0 H 300");

/* Reset everything to defaults */
offset: initial;

auto after the path is offset-rotate: auto, which keeps the element pointed along the path as it moves — handy for arrows or vehicles.

Example: animate an element along a triangular path

The element below follows a triangle. The @keyframes rule animates offset-distance from 0% to 100%, so the box loops around the path forever.

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

Example: orbit an icon around a point

A circle() path makes an element travel in a ring. Setting offset-rotate: 0deg keeps it upright instead of tilting with the curve.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @keyframes orbit {
        from {
          offset-distance: 0%;
        }
        to {
          offset-distance: 100%;
        }
      }
      .planet {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1c87c9;
        offset-path: circle(80px at 150px 150px);
        offset-rotate: 0deg;
        animation: orbit 5s linear infinite;
      }
    </style>
  </head>
  <body>
    <h2>Orbit example</h2>
    <div class="planet"></div>
  </body>
</html>

Values

Value	Description
offset-position	The starting point of the path when the path shape has no origin of its own.
offset-path	The shape the element follows — an SVG `path()`, `circle()`, `ray()`, or the container outline.
offset-distance	How far along the path the element sits, from `0%` (start) to `100%` (end). The value you typically animate.
offset-anchor	The point of the element that is locked onto the path (defaults to `auto`, the element's `transform-origin`).
offset-rotate	How the element rotates along the path: `auto` faces the direction of travel, `0deg` stays upright.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.

transform — moves, rotates, or scales an element on the straight axes; the usual fallback when motion paths aren't supported.
animation — drives the @keyframes that change offset-distance over time.
transition — animate offset-distance smoothly in response to a state change instead of with keyframes.
offset-path, offset-distance, offset-rotate, offset-anchor, offset-position — the individual longhands, with deeper examples for each.

Practice

What is the purpose of the offset properties in CSS?

They are used to define the shape-outside and clip-path property.They define the text color in CSS.They are used for specific element sizing.They allow positioning an object outside the normal flow.They are used to apply special effects to an object.

What offset is a shorthand for