offset-distance
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Theoffset-distanceCSS property specifies a position along anoffset-path for an element to be placed.
Try it
offset-distance: 0%;offset-distance: 80%;offset-distance: 50px;<section> <div></div></section>#example-element { width: 24px; height: 24px; background: #2bc4a2; offset-path: path("M-70,-40 C-70,70 70,70 70,-40"); clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);}/* Provides a reference image of what path the element is following */#default-example { background-position: calc(50% - 12px) calc(50% + 14px); background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');}Syntax
css
/* Default value */offset-distance: 0;/* the middle of the offset-path */offset-distance: 50%;/* a fixed length positioned along the path */offset-distance: 40px;/* Global values */offset-distance: inherit;offset-distance: initial;offset-distance: revert;offset-distance: revert-layer;offset-distance: unset;<length-percentage>A length that specifies how far the element is along the path (defined with
offset-path).100% represents the total length of the path (when the
offset-pathis defined as a basic shape orpath()).
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the total path length |
| Computed value | for<length> the absolute value, otherwise a percentage |
| Animation type | alength,percentage or calc(); |
Formal syntax
offset-distance =
<length-percentage>
<length-percentage> =
<length>|
<percentage>
Examples
Using offset-distance in an animation
The motion aspect in CSS Motion Path typically comes from animating theoffset-distance property. If you want to animate an element along its full path, you would define itsoffset-path and then set up an animation that takes theoffset-distance from0% to100%.
HTML
html
<div></div>CSS
css
#motion-demo { offset-path: path("M20,20 C20,100 200,0 200,100"); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan;}@keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; }}Result
Specifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-distance-property |