Moving Along a Curved Path in CSS

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of 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 →