Motion along path in CSS

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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 →