CSSoffset Property
Example
Use the offset shorthand property to set property values for offset-path, offset-distance and offset-rotate on an <img> element:
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}
More "Try it Yourself" examples below.
Definition and Usage
Theoffset property is used when animating an element along a path, and is a shorthand property for the following properties:
For different ways of setting theoffset property value, see "More Examples" below.
| Default value: | See the default value for the individual properties |
|---|---|
| Inherited: | no |
| Animatable: | yes.Read aboutanimatableTry 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
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 aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
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:
offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}
offset-path and offset-distance
Use the offset property of an <img> element to set the offset-path and offset-distance property values:
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}
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:
offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}
Related Pages
SVG tutorial:SVG Path
CSS tutorial:CSS Animations
CSS reference:CSS offset-anchor property
CSS reference:CSS offset-distance property
CSS reference:CSS offset-path property
CSS reference:CSS offset-position property
CSS reference:CSS offset-rotate property
