Moving Along a Curved Path in CSS with Layered Animation

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying an animation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

However, instead of turning to JavaScript for producing more natural looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

View Tutorial