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|path()|ray()|url()|basic-shape|cord-box|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
SVG tutorial: SVG Path
CSS tutorial: CSS Animations
CSS reference: CSS offset property
CSS reference: CSS offset-anchor property
CSS reference: CSS offset-distance property
CSS reference: CSS offset-position property
CSS reference: CSS offset-rotate property
