CSS offset-path Property
Example
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%; }
}
Try it Yourself »
Definition and Usage
The offset-path
property creates a path for an animated element to follow.
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 |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
offset-path | 55 | 79 | 72 | 15.4 | 45 |
CSS Syntax
offset-path: none|value|initial|inherit;
Property Values
Value | Description |
---|---|
none | Default. The element's default offset-path property value |
path() | Specify a path in SVG syntax. Learn about SVG paths |
ray() | Specify a path with the CSS ray() function |
url() | Specify a path by using the URL to an SVG file |
<basic-shape> | Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon() |
<coord-box> | |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
HTML SVG tutorial: SVG Path
CSS tutorial: CSS Animations
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