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
.
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
.
This property is a shorthand for the following CSS properties:
/* 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; /* Global values */ offset: inherit; offset: initial; offset: revert; offset: revert-layer; offset: unset;
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 |
<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 |
---|
Motion Path Module Level 1 # offset-shorthand |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
offset |
5546 | 7979 | 72 | No | 4233 | 16 | 5546 | 5546 | No | 4233 | 16 | 6.05.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/offset