Motion along path in CSS

Avatar of Chris Coyier
Chris Coyier on

From the “I barely knew this was a thing and you can already play with it in browsers” files:

Motion paths allow authors to animate any graphical object along an author-specified path.

I suspect Chrome jumped on this because it’s something that was only otherwise doable in SMIL, which they are ditching. I believe this is the first time the full path syntax has made it into CSS? (e.g. motion-path: path('M100,250 C 100,50 400,50 400,250');).

There are some demos on CodePen.

Direct Link →