The offset shorthand sets all motion path properties: offset-position, offset-path, offset-distance, offset-rotate, and offset-anchor. Lets you define an element's path-based animation in a single declaration..car {
offset: path("M 0 0 C 100 0 100 100 200 100");
}@keyframes drive {
to { offset-distance: 100%; }
}
.car {
offset: ray(45deg closest-side) 50% auto;
animation: drive 5s linear infinite;
}min:0max:9999step:1units:% | px | emautoDefault offset-rotate value — rotates automatically along the path direction.reverseoffset-rotate value — rotates in reverse of the path direction.noneoffset-path value — no path.topoffset-anchor value — anchors to the top edge of the element.bottomoffset-anchor value — anchors to the bottom edge of the element.leftoffset-anchor value — anchors to the left edge of the element.rightoffset-anchor value — anchors to the right edge of the element.centeroffset-anchor value — anchors to the center of the element.margin-boxoffset-anchor reference box — the element's margin-box.stroke-boxoffset-anchor reference box — stroke-box (SVG).content-boxoffset-anchor reference box — the element's content-box.padding-boxoffset-anchor reference box — the element's padding-box.border-boxoffset-anchor reference box — the element's border-box.fill-boxoffset-anchor reference box — fill-box (SVG).view-boxoffset-anchor reference box — view-box (SVG viewport).normaloffset-rotate value — no rotation; element keeps its original orientation.path()SVG path data. Syntax: path("M 0 0 L 100 100").ray()Ray from a point at an angle. Syntax: ray(45deg closest-side).url()Reference to an SVG path element. Syntax: url(#myPath).Motion Path Module Level 1Editor's Draft<length-percentage>W3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
