The offset-path property specifies a path along which an element is animated (motion path). The element translates from the start to the end of the path according to offset-distance, and may rotate with the path direction via offset-rotate..mover {
offset-path: path('M 0 0 L 200 0');
}.orbit {
offset-path: circle(100px at 50% 50%);
animation: spin 4s linear infinite;
}noneNo motion path (default value).border-boxPath follows the element's border box edge.padding-boxPath follows the padding box edge.margin-boxPath follows the margin box edge.fill-boxPath follows the SVG fill bounding box.stroke-boxPath follows the SVG stroke bounding box.view-boxPath follows the SVG viewBox.content-boxPath follows the element's content box edge.path()Defines a path using SVG path data syntax, e.g. path('M 0 0 L 100 100').ray()A straight ray path defined by an angle, e.g. ray(45deg closest-side).circle()Circular path.ellipse()Elliptical path.polygon()Polygonal path.url()References an SVG shape element as the path.Motion Path Module Level 1Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
