offset-distance
The offset-distance
CSS property specifies a position along an offset-path
for an element to be placed.
Try it
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-path
is 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 | a length, 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 the offset-distance
property. If you want to animate an element along its full path, you would define its offset-path
and then set up an animation that takes the offset-distance
from 0%
to 100%
.
HTML
html
<div id="motion-demo"></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 |
Browser compatibility
BCD tables only load in the browser