offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

The offset CSS shorthand property sets all the properties required for animating an element along a defined path. The offset properties together help to define an offset transform, a transform that aligns a point in an element (offset-anchor) to an offset position (offset-position) on a path (offset-path) at various points along the path (offset-distance) and optionally rotates the element (offset-rotate) to follow the direction of the path.

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

Try it

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;

#example-element {
  width: 24px;
  height: 24px;
  background: #2bc4a2;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: distance 3000ms infinite normal ease-in-out;
  animation-play-state: paused;
}

#example-element.running {
  animation-play-state: running;
}

.wrapper {
  height: 220px;
  width: 200px;
  background:
    url('data:image/svg+xml;utf8,')
      no-repeat,
    url('data:image/svg+xml;utf8,');
}

@keyframes distance {
  to {
    offset-distance: 100%;
  }
}

#playback {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1em;
}

window.addEventListener("load", () => {
  const example = document.getElementById("example-element");
  const button = document.getElementById("playback");

  button.addEventListener("click", () => {
    if (example.classList.contains("running")) {
      example.classList.remove("running");
      button.textContent = "Play";
    } else {
      example.classList.add("running");
      button.textContent = "Pause";
    }
  });
});

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;

/* Offset path */
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

/* Global values */
offset: inherit;
offset: initial;
offset: revert;
offset: revert-layer;
offset: unset;

Formal definition

Initial value	as each of the properties of the shorthand: `offset-position`: `normal` `offset-path`: `none` `offset-distance`: `0` `offset-anchor`: `auto` `offset-rotate`: `auto`
Applies to	transformable elements
Inherited	no
Percentages	as each of the properties of the shorthand: `offset-position`: refer to the size of containing block `offset-distance`: refer to the total path length `offset-anchor`: relative to the width and the height of the element's reference box
Computed value	as each of the properties of the shorthand: `offset-position`: for the absolute value, otherwise a percentage `offset-path`: as specified `offset-distance`: for the absolute value, otherwise a percentage `offset-anchor`: for the absolute value, otherwise a percentage `offset-rotate`: as specified
Animation type	as each of the properties of the shorthand: `offset-position`: a position `offset-path`: by computed value type `offset-distance`: a length, percentage or calc(); `offset-anchor`: a position `offset-rotate`: as , or
Creates stacking context	yes

Formal syntax

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

 = 
  normal      |
  auto        |
    

 = 
  none                          |
   ||   

 = 
    

 = 
  [ auto | reverse ]  ||
               

 = 
  auto        |
    

 = 
  [ left | center | right | top | bottom |  ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right |  ] [ top | center | bottom |  ]  |
  [ [ left | right ]  ] && [ [ top | bottom ]  ]  

 = 
          |
            |
    

 = 
    |
  view-box     

 = 
        |
    

 = 
  ray(           &&
  ?           &&
  contain?              &&
  [ at  ]? )  

 = 
    |
    

 = 
    |
  fill-box      |
  stroke-box    

 = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

 = 
  url(  * )  |
                        

 = 
  src(  * )  

 = 
  content-box  |
  padding-box  |
  border-box

Examples

Animating an element along a path

HTML

html

CSS

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

Specifications

Specification
Motion Path Module Level 1 # offset-shorthand