Motion path (offset-path)
A route an element follows through curves, arcs, or loops instead of taking a straight line between two points.
See it
What it is
A motion path gives an element a route to follow, so it can arc, loop, or snake through space instead of interpolating along one straight line. In CSS, offset-path defines the route, offset-distance moves the element from 0% to 100% along it, and offset-rotate can turn the element to face the direction of travel.
Reach for it when the route itself carries meaning: a delivery marker following a map, a planet orbiting, a product moving through a process, or a decorative object sweeping around a headline. The path can come from CSS shapes or an SVG-style path() string, which makes complex curves reusable without hand-authoring dozens of position keyframes. SVG has done this since SMIL's animateMotion; offset-path is the same idea unlocked for any HTML element.
Gotcha: the element's anchor point and automatic rotation often make a correct path look wrong. Set offset-anchor and offset-rotate deliberately, and leave enough room for the element itself around every bend. Long or looping travel can also be disorienting, so provide a stationary reduced-motion state.
Ask AI for it
Move this marker along a curved CSS motion path. Define the route with offset-path: path(), animate offset-distance from 0% to 100%, and use offset-rotate: auto so the marker faces the direction of travel. Keep the path authored in one fixed coordinate space and scale the whole container with 'transform: scale()' so the route stays proportional, set the marker's offset-anchor explicitly, and replace the travel with its final static position inside a prefers-reduced-motion: reduce media query.