CSS offset property
offset property allows you animate an element by defining a specific path. It is an experimental property, so always check the browser support info.
offset is a shorthand for five subproperties:
All of them can also be used individually. However, the subproperties are experimental as well.
Theory is great, but we recommend digging deeper!
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.
||Defines the point traveling along the path in keywords, length units, percentages or edge offset values|
||Defines the element's position in the path in percentages|
||Defines the motion path in SVG coordinates|
||The initial position of the element|
||Defines the element's orientation in the path in angles|
Note: in its early versions, the
offsetCSS property was also called