Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

Motion path

The offset CSS property animates an element along a defined motion path.

Syntax and cascade

Overview

The offset CSS property animates an element along a defined motion path.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
offset
55
79
72
16
55
16
Other
css.properties.offset-anchor

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.
116
116
72
16
116
16
CSS property
auto
116
116
72
16
116
16
bottom
116
116
72
16
116
16
center
116
116
72
16
116
16
left
116
116
72
16
116
16
right
116
116
72
16
116
16
top
116
116
72
16
116
16
Other
css.properties.offset-distance

The offset-distance CSS property specifies a position along an offset-path for an element to be placed.
55
79
72
16
55
16
css.properties.offset-path

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.
55
79
72
15.4
55
15.4
CSS property
basic shape

`<basic-shape>`
116
116
122
18
116
18
border-box
116
116
122
18
116
18
content-box
116
116
122
18
116
18
fill-box
116
116
122
18
116
18
margin-box
Experimental
18
18
none
80
80
72
18
80
18
padding-box
116
116
122
18
116
18
path

Support for `path()` function as a value
64
79
72
16
64
16
ray

Support for `ray()` function as a value
116
116
122
16
116
16
stroke-box
116
116
122
18
116
18
url

`<url>`
116
116
122
17
116
17
view-box
116
116
122
18
116
18
Other
css.properties.offset-position

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 basic-shape/path…
116
116
122
16
116
16
CSS property
auto
116
116
122
16
116
16
bottom
116
116
122
16
116
16
center
116
116
122
16
116
16
left
116
116
122
16
116
16
normal
116
116
122
17.2
116
17.2
right
116
116
122
16
116
16
top
116
116
122
16
116
16
Other
css.properties.offset-rotate

The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.
56
79
72
16
56
16
CSS property
auto
46
79
72
16
46
16
reverse
46
79
72
16
46
16
Other
css.types.ray

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.
116
116
122
16
116
16
CSS type
position

`at <position>`
116
116
122
17.2
116
17.2
size

`<size>`
116
116
122
17
116
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion (46)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion (46)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-distance (46)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-distance (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-distance (46)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-path (46)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-path (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: motion-path (46)
Notes 2 item(s)
Implementation note
  • Previously available under a different name: offset-rotation (55)
  • Previously available under a different name: motion-rotation (46)
Notes 2 item(s)
Implementation note
  • Previously available under a different name: offset-rotation (79)
  • Previously available under a different name: motion-rotation (79)
Notes 2 item(s)
Implementation note
  • Previously available under a different name: offset-rotation (55)
  • Previously available under a different name: motion-rotation (46)

Syntax

CSS 
.airplane {
  offset-path: path("M 0 200 Q 150 0 300 200 T 600 200");
  offset-rotate: auto;
  animation: fly 3s ease-in-out infinite;
}

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

Live demo

curvelinepathmove

Motion path (offset-path) curvelinepathmove demo.

PreviewFullscreen

Circleshapepath

Motion path (offset-path) Circleshapepath demo.

PreviewFullscreen

straight-line path

Motion path (offset-path) straight-line path demo.

PreviewFullscreen

Use cases

  • Using Motion path

    The offset CSS property animates an element along a defined motion path.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features