CSS offset-path property

Definition and Usage

offset-path This property is used to create a path for animation elements.

Example

Create a path for the animation <div>:

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

Try It Yourself

CSS Syntax

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Property Value

Value Description
none Default. The default offset-path property value of the element.
path() Specify the path using SVG syntax. See:SVG Path.
ray() Specify the path using the CSS ray() function.
url() Specify the path using the URL of an SVG file.
<basic-shape> Define basic shapes (such as inset(), circle(), ellipse(), or polygon()) using CSS functions to specify the path.
<coord-box> Specify the path using a coordinate box.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none
Inheritance: No
Animation Creation: Supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

Related Page

Tutorial:SVG Path

Tutorial:CSS Animation

Reference:CSS offset property

Reference:CSS offset-anchor property

Reference:CSS offset-distance property

Reference:CSS offset-position property

Reference:CSS offset-rotate property