CSS is very good at moving elements “point-to-point” using keyframe animation, or making objects scale, arc, or swing. It can even recreate traditional “pose-to-pose” animation using step()
. But CSS usually comes up against hard limits when trying to move elements along a curved or complex path.
Derived from technology that has been in SVG for a decade, the new Motion Path specification allows elements to follow curving, pre-plotted paths in native HTML and CSS, with some assistance from SVG. At the time of writing, CSS motion path is only supported in Chrome 46+, Opera 33+, and the latest version of the Android browser.