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
Specification | Status | Comment |
---|---|---|
Motion Path Module Level 1 The definition of 'offset' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
offset | Chrome
Full support
55
| Edge
Full support
79
| Firefox
Full support
72
| IE No support No | Opera
Full support
42
| Safari No support No | WebView Android
Full support
55
| Chrome Android
Full support
55
| Firefox Android No support No | Opera Android
Full support
42
| Safari iOS No support No | Samsung Internet Android
Full support
6.0
|
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.