Working Draft · motion

Motion Path

6 properties, 1 function defined by this specification, all known to at least one browser .

Read the Editor's Draft ↗ W3C Working Draft ↗

Each feature in detail

`offset`

Property Baseline: widely availablesince March 2025

MDN 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.

Live preview Example from MDN

#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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 140" width="200" height="140"><path d="M 0 60 L 100 60 L 50 10 L 0 60" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>')
      no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -140 150 230" width="200" height="230"><path d="M 0 70 L 56 70 L 98 0 L 42 0 L 0 70" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}

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

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

<section class="default-example" id="default-example">
  <div class="wrapper">
    <div id="example-element"></div>
  </div>
  <button id="playback" type="button">Play</button>
</section>

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";
  }
});

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: transformable elements
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: offset-path, offset-distance, offset-rotate, offset-anchor, offset-position

Browser support

First browser version supporting offset
Chrome	55
Edge	79
Firefox	72
Safari	16
Chrome Android	55
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`offset-anchor`

Property Baseline: widely availablesince March 2025

MDN The offset-anchor CSS property specifies the point inside the box of an element traveling along an offset-path that is actually moving along the path.

Live preview Example from MDN

#example-element {
  offset-path: path("M 0,20 L 200,20");
  animation: distance 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
  animation-play-state: paused;
}

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

.wrapper {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    black 50%,
    black 51%,
    transparent 52%
  );
  border: 1px solid #cccccc;
  width: 90%;
}

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

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

<section class="default-example" id="default-example">
  <div class="wrapper">
    <div id="example-element"></div>
  </div>
  <button id="playback" type="button">Play</button>
</section>

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";
  }
});

Syntax

auto | <position>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: transformable elements
Inherited: no
Percentages: relative to the width and the height of the element’s reference box
Computed value: the auto keyword or a computed <position>
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting offset-anchor
Chrome	116
Edge	116
Firefox	72
Safari	16
Chrome Android	116
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`offset-distance`

Property Baseline: widely availablesince March 2025

MDN The offset-distance CSS property specifies a position along an offset-path for an element to be placed.

Live preview Example from MDN

#example-element {
  width: 24px;
  height: 24px;
  background: #2bc4a2;
  offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}

/* Provides a reference image of what path the element is following */
#default-example {
  background-position: calc(50% - 12px) calc(50% + 14px);
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: transformable elements
Inherited: no
Percentages: relative to the offset path length
Computed value: a computed <length-percentage> value
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting offset-distance
Chrome	55
Edge	79
Firefox	72
Safari	16
Chrome Android	55
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`offset-path`

Property Baseline: widely availablesince March 2025

MDN The offset-path CSS property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves.

Live preview Example from MDN

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

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

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

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

#default-example {
  position: relative;
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
  <button id="playback" type="button">Play</button>
</section>

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";
  }
});

Syntax

none | <offset-path> || <coord-box>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting offset-path
Chrome	55
Edge	79
Firefox	72
Safari	15.4
Chrome Android	55
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`offset-position`

Property Baseline: widely availablesince March 2025

MDN The offset-position CSS property defines the initial position of an element along a path. This property is typically used in combination with the offset-path property to create a motion effect. The value of offset-position determines where the element gets placed initially for moving along an offset path if an offset-path function such as path() does not specify its own starting position.

Live preview Example from MDN

#wrap {
  width: 260px;
  height: 160px;
  border: 1px dashed black;
}

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

<div id="wrap">
  <div id="motion-demo"></div>
</div>

Syntax

normal | auto | <position>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: normal
Applies to: transformable elements
Inherited: no
Percentages: Refer to the size of containing block
Computed value: The normal or auto keywords, or a computed <position>
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting offset-position
Chrome	116
Edge	116
Firefox	122
Safari	16
Chrome Android	116
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`offset-rotate`

Property Baseline: widely availablesince March 2025

MDN The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.

Live preview Example from MDN

#example-element {
  width: 24px;
  height: 24px;
  background: #2bc4a2;
  offset-path: path("M-70,-40 C-70,70 70,70 70,-40");
  animation: distance 8000ms infinite linear;
  animation-play-state: paused;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
}

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

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

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

/* Provides a reference image of what path the element is following */
#default-example {
  position: relative;
  background-position: calc(50% - 12px) calc(50% + 14px);
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-75 -45 150 140" width="150" height="140"><path d="M-70,-40 C-70,70 70,70 70,-40" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>');
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
  <button id="playback" type="button">Play</button>
</section>

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";
  }
});

Syntax

[ auto | reverse ] || <angle>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: transformable elements
Inherited: no
Percentages: n/a
Computed value: computed <angle> value, optionally preceded by auto
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting offset-rotate
Chrome	56
Edge	79
Firefox	72
Safari	16
Chrome Android	56
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`ray()`

Function Baseline: widely availablesince March 2025

MDN The ray() CSS function defines the offset-path line segment that an animated element can follow. The line segment is referred to as "ray". The ray begins from an offset-position and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the contain keyword.

Live preview Example from MDN

body {
  width: fit-content;
  height: fit-content;
}

.container {
  width: 80vw;
  height: 100px;
  border: 1px dashed black;
  margin: 0 0.5em 2em 2em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

.box {
  background-color: palegreen;
  border-top: 4px solid black;
  opacity: 20%;
}

.box:first-of-type {
  position: absolute;
}

.box1 {
  offset-path: ray(0deg);
}

.box2 {
  offset-path: ray(150deg);
}

.box3 {
  offset-rotate: 0deg;
  offset-position: 20% 40%;
  offset-path: ray(150deg);
}

.box4 {
  offset-position: 0 0;
  offset-path: ray(0deg);
}

.box5 {
  offset-path: ray(60deg closest-side at bottom right);
}

<pre>/* original */</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box0">0</div>
</div>

<pre>
  offset-path: ray(0deg);
  /* Default offset starting position is 50% 50% */
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box1">1</div>
</div>

<pre>
  offset-path: ray(150deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box2">2</div>
</div>

<pre>
  offset-rotate: 0deg;
  offset-position: 20% 40%;
  offset-path: ray(150deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box3">3</div>
</div>

<pre>
  offset-position: 0 0;
  offset-path: ray(0deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box4">4</div>
</div>

<pre>
  offset-path: ray(60deg closest-side at bottom right);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box5">5</div>
</div>

Syntax

ray( <angle> && <ray-size>? && contain? && [at <position>]? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting ray()
Chrome	116
Edge	116
Firefox	122
Safari	16
Chrome Android	116
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗