CSSoffset-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 »offset-path: path('M20,170 L100,20 L180,100 Z');
animation: moveDiv 3s 3;
}
@keyframes moveDiv {
100% { offset-distance: 100%; }
}
Definition and Usage
Theoffset-path property creates a path for an animated element to follow.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | Yes.Read aboutanimatableTry 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 likeinset(),circle(),ellipse() orpolygon() |
| <coord-box> | |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
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
