CSS offset Property
Example
Use the offset shorthand property to set property values for offset-path, offset-distance and offset-rotate on an <img> element:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The offset property is used when animating an element along a path, and is a shorthand property for the following properties:
For different ways of setting the offset property value, see "More Examples" below.
| Default value: | See the default value for the individual properties |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| offset | 55 | 79 | 72 | 16 | 42 |
CSS Syntax
offset: auto|value|initial|inherit;
Property Values
| Value | Description |
|---|---|
| auto | Default. See default value for each individual 'offset-' property. |
| offset-anchor | Specifies the point on an element that is fixed to the path it is animated along. Default value is auto |
| offset-distance | Specifies the distance from the start of the path defined by offset-path. Default value is 0 |
| offset-path | Specifies the path an element is animated along. Default value is none |
| offset-position | Specifies the initial position of an element along a path. Default value is normal |
| offset-rotate | Specifies rotation of an element as it is animated along a path. Default value is auto |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
offset-path and offset-rotate
Use the offset property of an <img> element to set the offset-path and offset-rotate property values:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
Try it Yourself »
offset-path and offset-distance
Use the offset property of an <img> element to set the offset-path and offset-distance property values:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
Try it Yourself »
offset-path, offset-distance, offset-rotate and offset-anchor
Use the offset property of an <img> element to set the offset-path, offset-distance, offset-rotate and offset-anchor property values:
img {
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
Try it Yourself »
Related Pages
HTML SVG tutorial: SVG Path
CSS tutorial: CSS Animations
CSS offset-anchor property: CSS Offset-anchor property
CSS offset-distance property: CSS Offset-distance property
CSS offset-path property: CSS Offset-path property
CSS offset-rotate property: CSS Offset-rotate property
