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%.
It is documented as part of the Motion Path specification.
Syntax
/* Usage Example */
.moving-dot {
offset-path: path(';M 0 0 L 100 100');
/* Places the dot halfway along the line */
offset-distance: 50%;
}
/* Global values */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;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.
55+
72+
16+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more