offset-distance
Quick Summary for offset-distance
offset-distance CSS property specifies a position along an offset-path for an element to be placed.
Code Usage for offset-distance
<pre class="brush: css notranslate"><code><span class="token comment">/ Default value /</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/ the middle of the offset-path /</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token comment">/ a fixed length positioned along the path /</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">offset-distance</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for offset-distance
offset-distance
The offset-distance CSS property specifies a position along an offset-path for an element to be placed.
Syntax
/* Default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; /* Global values */ offset-distance: inherit; offset-distance: initial; offset-distance: revert; offset-distance: unset; <length-percentage>A length that specifies how far the element is along the path (defined with offset-path).
100% represents the total length of the path (when the offset-path is defined as a basic shape or path()).
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | transformable elements |
| Inherited | no |
| Percentages | refer to the total path length |
| Computed value | for <length> the absolute value, otherwise a percentage |
| Animation type | a length, percentage or calc(); |
Formal syntax
<length-percentage>where
<length-percentage> = <length> | <percentage>
Examples
Using offset-distance in an animation
The motion aspect in CSS Motion Path typically comes from animating the offset-distance property. If you want to animate an element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to 100%.
<div id="motion-demo"></div> #motion-demo { offset-path: path('M20,20 C20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } Specifications
| Specification |
|---|
| Motion Path Module Level 1 # offset-distance-property |
See also
offset offset-anchor offset-path offset-position offset-rotate Last modified: Aug 12, 2021, by MDN contributors
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
