CSS - offset Property
CSS - offset Property
The CSS shorthand property offset makes it easier for an element to animate along a certain path.
- It has many characteristics that together comprise an offset transform.
It has many characteristics that together comprise an offset transform.
- With this transform, a specified point inside the element ( offset-anchor ) is aligned to a certain path position ( offset-position ) at various points along the route ( offset-distance ).
With this transform, a specified point inside the element ( offset-anchor ) is aligned to a certain path position ( offset-position ) at various points along the route ( offset-distance ).
- It also allows the element to be optionally rotated ( offset-rotate ) to follow the path’s direction.
It also allows the element to be optionally rotated ( offset-rotate ) to follow the path’s direction.
Constituent Properties
The offset property is a shorthand for the following CSS properties:
- offset-anchor
offset-anchor
- offset-distance
offset-distance
- offset-path
offset-path
- offset-position
offset-position
- offset-rotate
offset-rotate
Possible Values
The following list of values is accepted by offset shorthand property.
- offset-anchor - Defines a point within the element that aligns with an offset position on the path.
offset-anchor - Defines a point within the element that aligns with an offset position on the path.
- offset-path - Defines the path along which the element is animated.
offset-path - Defines the path along which the element is animated.
- offset-distance - Defines how far along the path the element is placed.
offset-distance - Defines how far along the path the element is placed.
- offset-rotate - Optionally rotates the element to align with the direction of the path.
offset-rotate - Optionally rotates the element to align with the direction of the path.
- auto - All properties are reset to their default values.
auto - All properties are reset to their default values.
Applies to
Transformable elements
Syntax
offset = [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?CSS offset - path value
The following example demonstrates the usage of offset shorthand property with path value.
CSS offset - path and auto value
The following example demonstrates the usage of offset shorthand property with path and auto value.
CSS Offset - Related Properties
Following table lists related properties to offset property:
| Property | Description |
|---|---|
| offset-anchor | Specifies the position inside an element’s box that acts as the offset path. |
| offset-distance | Specifies where element should be positioned. |
| offset-path | Specifies element’s path inside its parent container. |
| offset-rotate | Specifies the orientation or direction of an element as it moves along the specified offset-path. |
| offset-position | Provide an element’s starting location along a route. |