Moving Along a Curved 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.

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 →