offset

The offset CSS property is a shorthand property for animating an element along a defined path. It sets the values of offset-position, offset-path, offset-distance, offset-rotate, and offset-anchor.

As with all shorthand properties, any omitted sub-values will be set to their initial value.

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

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 syntax

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

Examples

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 1
The definition of 'offset' in that specification.
Working Draft Initial definition
Initial valueas each of the properties of the shorthand:
Applies totransformable elements
Inheritedno
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Creates stacking contextyes

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offsetChrome 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 NoOpera Full support 42
Full support 42
Full support 33
Alternate Name
Alternate Name Uses the non-standard name: motion
Safari No support NoWebView 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 NoOpera Android Full support 42
Full support 42
Full support 33
Alternate Name
Alternate Name Uses the non-standard name: motion
Safari iOS No support NoSamsung 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.