Moving Along a Curved Path in CSS

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:

… if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we’re using ease-in for the X-axis, and ease-out for the Y-axis.

Direct Link →