offset
Quick Summary for offset
offset CSS shorthand property sets all the properties required for animating an element along a defined path.
Code Usage for offset
<pre class="brush: css notranslate"><code><span class="token comment">/ Offset position /</span> <span class="token property">offset</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/ Offset path /</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token function">ray</span><span class="token punctuation">(</span>45deg closest-side<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'M 100 100 L 300 100 L 200 300 z'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>arc.svg<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/ Offset path with distance and/or rotation /</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>circle.svg<span class="token punctuation">)</span></span> 100px<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>circle.svg<span class="token punctuation">)</span></span> 40%<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>circle.svg<span class="token punctuation">)</span></span> 30deg<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>circle.svg<span class="token punctuation">)</span></span> 50px 20deg<span class="token punctuation">;</span> <span class="token comment">/ Including offset anchor /</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token function">ray</span><span class="token punctuation">(</span>45deg closest-side<span class="token punctuation">)</span> / 40px 20px<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>arc.svg<span class="token punctuation">)</span></span> 2cm / 0.5cm 3cm<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>arc.svg<span class="token punctuation">)</span></span> 30deg / 50px 100px<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">offset</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">offset</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for offset
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:
offset-anchor offset-distance offset-path offset-position offset-rotate 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; /* Global values */ offset: inherit; offset: initial; offset: revert; offset: unset; Formal definition
| Initial value | as each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: auto |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:offset-position: referToSizeOfContainingBlockoffset-distance: refer to the total path lengthoffset-anchor: relativeToWidthAndHeight |
| Computed value | as each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specified |
| Animation type | as each of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()> |
| 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> @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; } Specifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-shorthand |
See also
offset-anchor offset-distance offset-path offset-position offset-rotate Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
