CSS offset-path Property
Example
.example {
offset-path: path("M20,20 C20,100 200,0 200,100");
animation: move 3s infinite alternate ease-in-out;
width: 50px;
height: 50px;
background: #1A73E8;
}Meaning:
The offset-path CSS property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system.
| Default value: | none |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
offset-path: none|ray()|url()|basic-shape|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| none | Specifies no motion path at all. |
| ray() | Taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the CSS gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the CSS radial gradient size values from closest-side to farthest-corner, and the keyterm contain. |
| url() | References the ID of an SVG shape — circle, ellipse, line, path, polygon, polyline, or rect — using the shape's geometry as the path. |
| basic-shape | Specifies a CSS shape including circle(), ellipse(), inset(), polygon(), or path(). |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
offset-path: none;
}