- is used when animating an element along a path, and is a shorthand property for the following properties: "offset-anchor", "offset-distance", "offset-path", "offset-rotate".
"offset-anchor" is currently only working in the Firefox browser.
CSS syntax : offset: auto | value | initial | inherit;
Property values:
auto : default. See default value for each individual 'offset-' property.
offset-anchor : specifies the point on an element that is fixed to the path it is animated along.
offset-distance : specifies the distance from the start of the path defined by offset-path.
offset-path : specifies the path an element is animated along.
offset-rotate : specifies rotation of an element as it is animated along a path
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
JavaScript syntax: object.style.offset="path('M 50,250 C 700,-50, -400, -50 250,250') 200px auto 90deg"
- specifies the point on an element to be fixed along a path defined by the offset-path property. The point defined by the offset-anchor property will also be the center of rotation if the element is rotated with the offset-rotate property.
Note: this property is currently only working with the Firefox browser.
CSS syntax : offset-anchor: auto | value | initial | inherit;
Property values:
auto : default. The achored point will be in the center of the element, same as property value '50% 50%'. property.
left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom : if you only specify one keyword, the other value will be "center".
xpos ypos : the first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.
x% y% : the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 50% 50%.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
The pink div is animated to follow a path written in SVG syntax.
offset-path: path('M25,300 L100,50 L300,150 Z'); creates a path that starts in position x,y=25,300 then creates a line to position 100,50 and then a line to 300,150 and then a line back to start.
'M' = moveto
'L' = lineto
'Z' = closepath
code:
<div>
<div id="frameDiv-C">
<span id="span-C">20x20vw</span>
<div id="Div-C"></div>
</div>
<p>The pink div is animated to follow a path written in SVG syntax.</p>
<p><code>offset-path: path('M25,300 L100,50 L300,150 Z');</code> creates a path that starts
in position x,y=25,300 then creates a line to position 100,50 and then a line to 300,150 and then a
line back to start.</p>
<ul>
<li>'M' = moveto</li>
<li>'L' = lineto</li>
<li>'Z' = closepath</li>
</ul>
</div>
<style>
#frameDiv-C {width: 20vw; height: 20vw; margin: 2vw; position: relative; border: solid black 0.2vw;
background-color: rgb(205, 242, 205);}
span#span-C {position: absolute;top: 0; left: 0;}
#frameDiv-C#span-C, #frameDiv-C #Div-C {width: 5vw; height: 2vw;border-radius: 0.3vw 1vw 1vw 0.3vw;
background-color: hotpink; offset-path: path('M25,300 L100,50 L300,150 Z'); animation: moveDiv 6s 3;}
@keyframes moveDiv {
100% { offset-distance: 100%; }
}
</style>
