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.
Share
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
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
