offset-distance
Specifies how far along a motion path (defined by offset-path) an element should be placed. It's usually animated from 0% to 100%.
Quick example
.moving-dot {
offset-path: path('M 0 0 L 100 100');
/* Places the dot halfway along the line */
offset-distance: 50%;
}Quick facts
Initial value
0Inherited
No
Applies to
transformable elements
Animation type
lpc
offset-distance Browser Support
Widely available Since 2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
55+
72+
16+
79+