Web/CSS/offset

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

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* 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;

Formal definition

Initial value	as each of the properties of the shorthand: `offset-position`: `auto` `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`: referToSizeOfContainingBlock `offset-distance`: refer to the total path length `offset-anchor`: relativeToWidthAndHeight
Computed value	as each of the properties of the shorthand: `offset-position`: for `<length>` the absolute value, otherwise a percentage `offset-path`: as specified `offset-distance`: for `<length>` the absolute value, otherwise a percentage `offset-anchor`: for `<length>` 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`: as <angle>, <basic-shape> or <path()> `offset-distance`: a length, percentage or calc(); `offset-anchor`: a position `offset-rotate`: as <angle>, <basic-shape> or <path()>
Creates stacking context	yes

Formal syntax

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

Examples

Animating an element along a path

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

Specifications

Specification	Status	Comment
Motion Path Module Level 1The definition of 'offset' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`offset`	Chrome Full support 55 Full support 55 Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Edge Full support 79 Full support 79 Full support 79 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Firefox Full support 72 Full support 72 No support 71 — 72 Disabled' Disabled' From version 71 until version 72 (exclusive): this feature is behind the `layout.css.motion-path.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 42 Full support 42 Full support 33 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Safari No support No	WebView Android Full support 55 Full support 55 Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Chrome Android Full support 55 Full support 55 Full support 46 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Firefox Android No support No	Opera Android Full support 42 Full support 42 Full support 33 Alternate Name' Alternate Name' Uses the non-standard name: `motion`	Safari iOS No support No	Samsung Internet Android Full support 6.0 Full support 6.0 Full support 5.0 Alternate Name' Alternate Name' Uses the non-standard name: `motion`

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.

offset by Mozilla Contributors is licensed under CC-BY-SA 2.5.