offset-distance#

#Introduction

The offset-distance CSS property specifies the position of an element along the path defined by offset-path.

Use offset-distance with offset-path to place an element at a specific progress point on a path, or animate it from the start of the path to the end.

#Examples

#Syntax

offset-distance: 0;
offset-distance: 1;
offset-distance: 0%;
offset-distance: 66%;
offset-distance: 100%;

#Values

• <number>

  Specifies the element's progress along the path as a normalized value. 0 places the element at the start of the path, and 1 places it at the end of the path.

• <percentage>

  Specifies the element's progress along the path. 0% places the element at the start of the path, and 100% places it at the end of the path.

• Default value

  0

#Formal definition

#Formal syntax

offset-distance = <number> | <percentage>

#Difference from Web

• mdn:offset-distance

1. Lynx does not support <length> or calc() values.

#Compatibility