W3cubDocs

/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:
Applies to transformable elements
Inherited no
Percentages as each of the properties of the shorthand:
Computed value as each of the properties of the shorthand:
Animation type as each of the properties of the shorthand:
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

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
offset 55
55
46
Uses the non-standard name: motion
79
79
79
Uses the non-standard name: motion
72
72
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.
No 42
42
33
Uses the non-standard name: motion
No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
offset 55
55
46
Uses the non-standard name: motion
55
55
46
Uses the non-standard name: motion
No 42
42
33
Uses the non-standard name: motion
No 6.0
6.0
5.0
Uses the non-standard name: motion

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset