CSS offset Property

❮ Previous Reference Next ❯

Example

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

  to {
    offset-distance: 100%;
  }
}

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

Meaning:

The offset CSS property sets all the properties required for animating an element along a defined path.

Note: Early versions of the spec called this property motion.

This property is a shorthand for the following CSS properties:

Default value:

As each of the properties of the shorthand:

Inherited:No
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.offset="offset-position|offset-path|offset-distance|offset-anchor|offset-rotate|initial|inherit|revert|revert-layer|unset";


Standard Syntax

offset: offset-position|offset-path|offset-distance|offset-anchor|offset-rotate|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
offset-position Specifies the initial position of the offset-path.
offset-path Specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system.
offset-distance Specifies a position along an offset-path for an element to be placed.
offset-anchor Specifies the point inside the box of an element traveling along an offset-path that is actually moving along the path.
offset-rotate Specifies the orientation/direction of the element as it is positioned along the offset-path.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  offset: See individual;
}
❮ Previous Reference Next ❯