Draft
This page is not complete.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The offset
CSS property is a shorthand property for animating an element along a defined path.
Early versions of the spec called this property motion
.
Value not found in DB!
/* 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;
Syntax not found in DB!
<div id="offsetElement"></div>
@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; }
Specification | Status | Comment |
---|---|---|
Motion Path Module Level 1 The definition of 'offset' in that specification. | Working Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 55
|
? | ? | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 55
|
55
|
? | ? | ? | ? | 6.0 |
© 2005–2018 Mozilla Developer Network 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