offset-distance
offset-distance sets how far from the start of the path set by offset-path an element is placed. Animating it from 0% to 100% moves the element along the path.
Syntax
<length-percentage>Preview
Presets
Drag the bottom-right corner to resize
Code
.box > :nth-child(2) {
offset-path: path("M 20 80 C 80 0 160 160 220 80");
offset-distance: 70%;
}Controls
offset-distance70%
About
Writing the value
- A percentage: a share of the total length of the path.
0%is the start and100%is the end. - A length (px and so on): places the element that far from the start of the path.
- The initial value is
0, the start of the path.
What happens before 0% or past 100% depends on the kind of path.
- On a path with an end, such as a path() not closed with Z or a ray() with
contain, the element stops at the ends. - On a path that loops, such as circle() or a path() closed with Z, going past 100% starts another lap from the start. Negative values go around backward.
- A ray() without
containhas no end, so past 100% the element keeps going in the same direction.
The preview writes a wave-shaped path on the item with offset-path and draws the path with gray dots.
When to use it
Use it to move icons or decorations along a path, by animating it from 0% to 100% with @keyframes. Giving several elements different values also lines them up on the same path.
Watch out
- Nothing happens while offset-path is
none. - Percentages are of the path's length, not the size of the parent box.
- Works from Chrome and Edge 55, Firefox 72, and Safari 16.