CSS offset-path Property

Create a path for an animated <div> to follow:

div {
offset-path: path('M20,170 L100,20 L180,100 Z');
animation: moveDiv 3s 3;
}

@keyframes moveDiv {
100% { offset-distance: 100%; }
}

Definition and Usage

The offset-path property creates a path for an animated element to follow.

Note: Currently, only path() and none are supported values for the offset-path property.

Default value:	none
Inherited:	no
Animatable:	Yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
offset-path	55.0	79.0	72.0	15.4	45.0

offset-path: none|value|initial|inherit;

Value	Description
none	Default. The element's default offset-path property value.
path()	Specify a path in SVG syntax. Learn about SVG paths
ray()	Currently not supported. Specify a path with the CSS ray() function.
url()	Currently not supported. Specify a path by using the URL to an SVG file.
<basic-shape>	Currently not supported. Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon().
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

HTML SVG tutorial: SVG Path

CSS offset property: CSS Offset property

CSS offset-anchor property: CSS Offset-anchor property

CSS offset-distance property: CSS Offset-distance property

CSS offset-rotate property: CSS Offset-rotate property