The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Follow an SVG-style path | .traveler {
offset-path: path('M 20 80 C 80 0 180 160 240 80');
} | View examples |
| Follow a basic shape | .satellite { offset-path: circle(40% at 50% 50%); } | View examples |
| Follow a contained ray | .marker {
offset-path:
ray(45deg closest-side contain at 50% 50%);
} | View examples |
| Choose the path reference box | .orb { offset-path: circle(42%) content-box; } | View examples |
| Move halfway along | .traveler { offset-distance: 50%; } | View examples |
| Animate path progress | @keyframes travel { to { offset-distance: 100%; } } | View examples |
| Face the path direction | .vehicle { offset-rotate: auto; } | View examples |
| Correct asset orientation | .vehicle { offset-rotate: auto 90deg; } | View examples |
| Keep a fixed orientation | .label { offset-rotate: 0deg; } | View examples |
| Choose the aligned element point | .pin { offset-anchor: 50% 100%; } | View examples |
| Set a ray starting point | .pin { offset-position: 25% 75%; } | View examples |
| Use the offset shorthand | .dot {
offset: path('M 0 0 L 200 0') 50% auto / center;
} | View examples |
| Gate path positioning | @supports (offset-path: circle(40%)) {
.status { offset-path: circle(40%); };
} | View examples |
| Remove optional travel | @media (prefers-reduced-motion: reduce) {
.traveler { animation: none; offset-distance: 100%; };
} | View examples |
CSS Motion Path places a transformable element at a distance along a geometric path, aligns a chosen point on the element to that position, and can rotate it with the path tangent. Use it for spatial relationships that remain meaningful when static, keep paths responsive to their containing block, and replace nonessential travel for people who request reduced motion.
Step by step
Detailed examples
Define geometry independently from progress
offset-path defines the route but does not itself create an animation. path() accepts SVG path-data coordinates, while basic shapes such as circle(), ellipse(), inset(), and polygon() can respond to a reference box. Applying a motion path creates an offset transform and carries the usual transform effects, including a stacking context.
.route-item { offset-path: path('M 20 120 C 90 0 210 0 280 120'); }
.route-item:first-child { offset-distance: 25%; }
.route-item:last-child { offset-distance: 75%; }Prefer box-relative shapes for responsive components
Numeric coordinates in path() do not automatically scale like percentages in a basic shape. A coord-box selects the containing block box against which the shape is resolved. ray() creates a straight route from a position; its contain keyword shortens the route based on the element's dimensions, a behavior intended mainly for centered, near-square objects.
.orbit { position: relative; container-type: inline-size; }
.orb { offset-path: ellipse(42% 32% at 50% 50%) content-box; offset-distance: 62%; offset-anchor: center; }.marker { offset-position: 50% 50%; offset-path: ray(70deg closest-side contain); offset-distance: 100%; offset-anchor: center; }Animate distance instead of rebuilding the path
offset-distance accepts a length or percentage, where 100% represents the path's total length. Closed shapes form loops; open paths have endpoints. Keep the route stable and animate progress for predictable interpolation, then choose timing from the meaning of the interaction rather than using continuous motion by default.
.delivery { offset-path: path('M 10 80 C 80 0 190 160 260 80'); offset-distance: 0%; animation: deliver 1.2s ease-in-out forwards; }
@keyframes deliver { to { offset-distance: 100%; } }Separate path direction from asset orientation
offset-rotate:auto aligns the element's positive x-axis with the path tangent. Add an angle when the artwork's visual front points in another direction; reverse adds 180 degrees. A bare angle supplies fixed rotation without following the tangent, which is usually more readable for labels and upright controls.
.vehicle { offset-path: path('M 20 100 C 100 10 180 190 260 100'); offset-distance: 55%; offset-rotate: auto 90deg; }
.route-label { offset-path: inherit; offset-distance: 55%; offset-rotate: 0deg; }Align the intended point to the route
offset-anchor chooses which point on the moving element is aligned with the current path position. Its auto value uses the point indicated by transform-origin; an explicit position such as 50% 100% can put a map pin's tip on the route. offset-position establishes the starting position for paths that need one, notably ray() without an at clause. Prefer longhands while debugging because the offset shorthand resets every component.
.map-pin { offset-position: 30% 70%; offset-path: ray(35deg closest-side); offset-distance: 70%; offset-anchor: 50% 100%; offset-rotate: 0deg; }Preserve meaning without motion or path support
Lay out essential controls and text in a usable base position, then add path placement inside @supports. Large arcs, loops, and continuous travel can trigger vestibular symptoms; under prefers-reduced-motion, remove the animation and present the meaningful start or end state directly. Motion must never be the only signal for progress, selection, or errors, and visual movement must not imply a changed DOM reading order.
.status-marker { position: absolute; inset: auto 1rem 1rem auto; }
@supports (offset-path: circle(40%)) { .status-marker { inset: auto; offset-path: circle(40%); animation: orbit 5s linear infinite; } @keyframes orbit { to { offset-distance: 100%; } } }
@media (prefers-reduced-motion: reduce) { .status-marker { animation: none; offset-distance: 25%; } }Local code tester
Move a marker along a responsive orbit
Adjust path geometry, progress, rotation, and anchor while retaining a reduced-motion final state.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.