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 1The 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
offset-distance
|
Chrome Full support 55 Full support 55 Full support 46 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Full support 79 Alternate Name' Uses the non-standard name: |
Firefox Full support 72 Full support 72 No support 69 — 72 Disabled' From version 69 until version 72 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 42 Full support 42 Full support 33 Alternate Name' Uses the non-standard name: |
Safari
No support No |
WebView Android Full support 55 Full support 55 Full support 46 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 55 Full support 55 Full support 46 Alternate Name' Uses the non-standard name: |
Firefox Android
No support No |
Opera Android Full support 42 Full support 42 Full support 33 Alternate Name' Uses the non-standard name: |
Safari iOS
No support No |
Samsung Internet Android Full support 6.0 Full support 6.0 Full support 5.0 Alternate Name' Uses the non-standard name: |
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.
offset-distance by Mozilla Contributors is licensed under CC-BY-SA 2.5.