CSS offset-distance Property

❮ Previous Reference Next ❯


.example {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3s infinite alternate ease-in-out;
  width: 50px;
  height: 50px;
  background: #1A73E8;

@keyframes move {
  0% {
    offset-distance: 0%;
  100% {
    offset-distance: 100%;


The offset-distance CSS property specifies a position along an offset-path for an element to be place.

Default value:0
JavaScript syntax:

Standard Syntax

offset-distance: length|percentage|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
length A length that specifies how far the element is along the path (defined with offset-path).
percentage 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()).
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  offset-distance: 0;
❮ Previous Reference Next ❯