The offset-distance
CSS property specifies a position along an offset-path
for an element to be placed.
Syntax
/* 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 |
Computed value | a computed <length-percentage> value |
Animation type | by computed value |
Formal syntax
<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
<div id="motion-demo"></div>
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%; } }