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

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 1
The definition of 'offset' in that specification.
Working Draft Initial definition

Browser compatibility

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.