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;
<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
<length-percentage>where
<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
<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%; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Motion Path Module Level 1 The definition of 'offset-distance' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
offset-distance | Chrome
Full support
55
| Edge
Full support
79
| Firefox
Full support
72
| IE No support No | Opera
Full support
42
| Safari No support No | WebView Android
Full support
55
| Chrome Android
Full support
55
| Firefox Android No support No | Opera Android
Full support
42
| Safari iOS No support No | Samsung Internet Android
Full support
6.0
|
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.