CSS offset Property

Description

The offset CSS property is a shorthand property that sets all the properties required for animating an element along a defined path. To use the offset property, you first need to define the path that the element will follow. This can be done using the path() CSS function. Once you have defined the path, you can use the offset property to specify the element's initial position on the path, the distance it will travel, and whether or not it should rotate. Individual properties are: offset-anchor, offset-distance, offset-path, offset-position and offset-rotate

Initial value: See individual properties
Applies to: transformable elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.offset

Interactive Demo

offset: path(
'M 20 60 L 120 60 L 70 10 L 20 60')
0% auto 90deg;

offset: path(
'M 20 210 L 74 210 L 118 140 
 L 62 140 L 20 210')
20% auto;

Syntax

offset: [ <offset-position>? [ <offset-path> [ <offset-distance> || <offset-rotate> ]? ]? ]! [ / <offset-anchor> ]?

Values

<offset-position>Specifies the initial position of an element along a path.
<offset-path>Specifies the path an element is animated along.
<offset-distance>Specifies the distance from the start of the path defined by offset-path.
<offset-rotate>Specifies rotation of an element as it is animated along a path
<offset-anchor>Specifies the point on an element that is fixed to the path it is animated along.

Example

HTML

<div id="offsetElement"></div>

CSS

@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}

Result

Editor