CSS offset-distance Property
Description
The offset-distance
CSS property specifies a position along an offset-path for an element to be placed. It is used in conjunction with the offset-path property, which defines the path that the element will follow. The offset-distance
property can be specified as a percentage of the total length of the path, or as an absolute length. A value of 0% places the element at the start of the path, while a value of 100% places the element at the end of the path. Negative values are also allowed, and will place the element before the start of the path. The offset-distance
property can be used to create animations, or to simply position an element along a path. For example, you could use it to create a car animation that follows a road, or to position a product image along a curved line.
- Initial value
- 0
- Applies to
- transformable elements
- Inherited
- no
- Computed value
- for <length> the absolute value, otherwise a percentage
- Animatable
- a length, percentage or calc();
- JavaScript syntax
- object.style.offsetDistance
Interactive Demo
Syntax
offset-distance: <length-percentage>
Values
- <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 or path()).
Example
<div id="motion-demo"></div>
#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%;
}
}
Browser Support
The following table will show you the current browser support for the CSS offset-distance
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 55 | 72 | 42 | ? |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
55 | 79 | 42 | x | 6 | 55 |
Last updated by CSSPortal on: 3rd January 2024