CSS offset property
The CSS offset property allows you animate an element by defining a specific path. It is an experimental property, so always check the browser support info.
CSS offset is a shorthand for five subproperties:
offset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotate
All of them can also be used individually. However, the subproperties are experimental as well.
Syntax and property values
As all shorthands in CSS, offset requires you to list the values for each subproperty in a row:
offset: path distance rotate anchor;
The subproperties and their values are explained in the table below.
| Subproperty | Default value | Definition |
|---|---|---|
offset-anchor |
auto |
Defines the point traveling along the path in keywords, length units, percentages or edge offset values |
offset-distance |
0 |
Defines the element's position in the path in percentages |
offset-path |
none |
Defines the motion path in SVG coordinates |
offset‑position |
auto |
The initial position of the element |
offset-rotate |
auto |
Defines the element's orientation in the path in angles |
Note: in its early versions, the
offsetCSS property was also calledmotion.
Browser support
Chrome
55+
Edge
-
Firefox
-
IE
-
Opera
42+
Safari
-
Mobile browser support
Chrome
55+
Firefox
-
Opera
-
Safari
-