CSS offset-distance Property
Use the offset-distance CSS property for specifying the position along the offset-path. Read about property values and try examples.
The CSS offset-distance property sets how far an element is moved along its motion path — the path defined by the offset-path property. Think of offset-path as drawing a track, and offset-distance as the position of the element on that track: 0 places it at the start, 100% at the end.
It is one of the building blocks of CSS Motion Path, which lets an element travel along an arbitrary shape (a line, a curve, an SVG path) instead of being limited to straight top/left transitions. On its own offset-distance is static, but animating it from 0 to 100% is what makes the element slide along the path.
When to use it
- Animating an element along a curved or custom path — a plane following a route, a bead on a string, an icon tracing a circle. Straight CSS transitions can't do this; a motion path can.
- Pausing an element at a specific point on a path — set a fixed value such as
offset-distance: 50%to place the element halfway along itsoffset-path. - Scroll- or interaction-driven motion — update
offset-distancewith JavaScript (or a scroll animation) to move an element along a path in response to user input.
offset-distance has no effect unless the element also has an offset-path. Without a path there is nothing to measure the distance against.
Values
It accepts a single <length-percentage>:
<length>— an absolute distance from the start of the path, e.g.40px.<percentage>— a distance relative to the total length of the path.0%is the start,100%is the end.
The initial value is 0.
Negative and over-100% values are valid. A value like -20% or 120% extends the element past the ends of the path; for a closed path it wraps around. This is handy when you want an element to start off-path and animate onto it.
offset-distance is part of the experimental CSS Motion Path module. In early drafts of the specification this property was called motion-offset. Check current browser support before relying on it in production.
| Property | Value |
|---|---|
| Initial Value | 0 |
| Applies to | Transformable elements |
| Inherited | No |
| Animatable | Yes |
| Version | Motion Path Module Level 1 |
| DOM Syntax | object.style.offsetDistance = "100%"; |
Syntax
offset-distance: <length-percentage>;For example:
/* A fixed point partway along the path */
offset-distance: 70%;
/* Absolute distance from the start */
offset-distance: 50px;
/* Animate from start to end of the path */
@keyframes move {
to {
offset-distance: 100%;
}
}Examples
Animating an element along a custom path
The element below has an offset-path shaped like a curve. Animating offset-distance from its default 0 to 100% slides the box smoothly along that path. Note that offset-rotate: reverse makes the box turn to face the direction of travel.
Example represented with House and Scissors
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 80px;
height: 80px;
background: linear-gradient(#eee 50%, #1c87c9 50%);
position: absolute;
left: 20%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 4s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-distance property example</h2>
<div class="mover"></div>
</body>
</html>Specifying the distance as a percentage
Here the value animates as a percentage of the total path length, so the element completes exactly one full pass regardless of how long the path is. Using 100% rather than an absolute length is the most portable way to animate along a path.
Example of the CSS offset-distance property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scissorHalf {
offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190');
animation: followpath 4s linear infinite;
}
@keyframes followpath {
to {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h2>Offset-distance property example</h2>
<svg class="box" width="700" height="450" viewBox="350 0 1400 900">
<title>House and Scissors</title>
<rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
<polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
<polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
<path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
<path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
</svg>
</body>
</html>Accepted values
| Value | Description |
|---|---|
<length-percentage> | A length or percentage giving the position along the offset path, measured from its start. |
initial | Sets the property to its default value (0). |
inherit | Inherits the value from the parent element. |
Related properties
offset-distance is rarely used alone — it works together with the other CSS Motion Path properties:
offset-path— defines the path the element travels along.offset-rotate— controls how the element rotates as it follows the path.offset-anchor— chooses which point of the element is placed on the path.offset— the shorthand that sets all motion-path properties at once.animation— drives theoffset-distancekeyframes that produce the motion.