CSS offset Property

What You’ll Learn

The offset property belongs to the CSS Motion Path module. It lets you animate elements along curves, circles, and SVG paths instead of only moving them in straight lines with transform.

Introduction

The offset property in CSS is used to control animations along a predefined path. It is part of the CSS Motion Path specification and is used with the @keyframes rule to define animations.

The offset property specifies the position of an element along a path defined by the offset-path property, allowing for more complex and dynamic animations.

Definition and Usage

In practice, developers usually work with the individual motion path properties rather than a single magic keyword. Together they describe where the path is, how far along it the element has traveled, which point of the element sits on the path, and how the element rotates while moving.

This is ideal for loader animations, decorative motion, icon paths, and playful UI effects that follow curves instead of simple horizontal or vertical movement.

📝 Syntax

The offset property has several sub-properties that work together to define the animation’s behavior:

element {
  offset-path: path;
  offset-distance: distance;
  offset-anchor: position;
  offset-rotate: angle | auto | reverse;
}

Basic Example

.animated-box {
  offset-path: path("M 150,200 A 100,100 0 1 1 149,200");
  animation: moveInCircle 5s linear infinite;
}

@keyframes moveInCircle {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

Syntax Rules

• Define a path first with offset-path.
• Animate progress with offset-distance, usually through @keyframes.
• Use offset-anchor to choose which point of the element sits on the path.
• Use offset-rotate when the element should turn to follow the path direction.

🎯 Default Value

The default values for the sub-properties are:

• offset-path: none
• offset-distance: 0
• offset-anchor: auto
• offset-rotate: auto

With these defaults, no motion path is active until you explicitly define a path and animate offset-distance.

💎 Property Values

The motion path system is built from related properties. Each one controls a different part of the animation.

Examples Gallery

Use motion path properties to animate elements along circles, rectangles, and custom curves.

<style>
  @keyframes moveInCircle {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
  }

  .animated-box {
    width: 50px;
    height: 50px;
    background-color: blue;
    offset-path: path("M 150,200 A 100,100 0 1 1 149,200");
    animation: moveInCircle 5s linear infinite;
  }
</style>

<div class="animated-box"></div>

.marker {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #dc2626;
  offset-path: path("M10 10 H 290 V 290 H 10 Z");
  animation: travelBorder 6s linear infinite;
}

@keyframes travelBorder {
  to { offset-distance: 100%; }
}

.dot {
  offset-path: path("M 10,80 Q 95,10 180,80 T 350,80");
  offset-anchor: 50% 50%;
  animation: followCurve 4s ease-in-out infinite alternate;
}

@keyframes followCurve {
  to { offset-distance: 100%; }
}

.arrow {
  width: 24px;
  height: 24px;
  background: #9333ea;
  offset-path: circle(80px at 120px 80px);
  offset-rotate: auto;
  animation: orbit 5s linear infinite;
}

@keyframes orbit {
  to { offset-distance: 100%; }
}

Related Motion Path Properties

The offset topic covers a family of properties. In real projects you will often see them split into dedicated pages such as offset-path, offset-distance, offset-anchor, and offset-rotate for finer control.

.badge {
  offset-path: path("M 20,100 C 80,20 140,180 200,100");
  offset-distance: 0%;
  offset-anchor: center;
  offset-rotate: auto;
}

♿ Accessibility

• Respect reduced motion — Wrap path animations in @media (prefers-reduced-motion: reduce) and provide a static fallback.
• Do not rely on motion alone — Important status changes should also use text or icons.
• Keep decorative motion subtle — Continuous looping paths can distract users with attention or vestibular sensitivity.
• Test keyboard and screen reader flows — Motion should not block interaction with nearby controls.

💡 Best Practices