CSS offset property

Definition and usage

offset This attribute is used to animate elements along a path and is a shorthand for the following attributes:

About setting offset Different ways to set attribute values, please refer to more examples below.

Instance

Example 1

Use offset Abbreviated attributes for setting offset-path, offset-distance, and offset-rotate for <img> elements:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

Try it yourself

Example 2: offset-path and offset-rotate

Using the <img> element's offset Set the attribute values of offset-path and offset-rotate:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

Try it yourself

Example 3: offset-path and offset-distance

Using the <img> element's offset Set the attribute values of offset-path and offset-distance:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

Try it yourself

Example 4: offset-path, offset-distance, offset-rotate, and offset-anchor

Using the <img> element's offset Attribute values for setting offset-path, offset-distance, offset-rotate, and offset-anchor properties:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

Try it yourself

CSS syntax

offset: auto|value|initial|inherit;

Attribute value

Value Description
auto Default. Refer to the default value of each individual 'offset-' property.
offset-anchor Specifies the point on the element that is fixed on the animation path. The default value is auto.
offset-distance Specifies the distance from the starting point of the path defined by offset-path. The default value is 0.
offset-path Specifies the path of the element to be animated. The default value is none.
offset-position Specifies the initial position of the element along the path. The default value is normal.
offset-rotate The rotation angle of the element when animated along the path. The default value is auto.
initial Sets this property to its default value. Refer to initial.
inherit Inherits this property from its parent element. Refer to inherit.

Technical details

Default value: See the default value for the individual properties
Inheritance: No
Animation creation: Supported. Refer to:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

Browser support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
55 79 72 16 42

Relevant page

Tutorial:SVG Path

Tutorial:CSS Animation

Reference:CSS offset property

Reference:CSS offset-anchor property

Reference:CSS offset-distance property

Reference:CSS offset-path property

Reference:CSS offset-position property

Reference:CSS offset-rotate property