CSS Motion Path: Animate on a Curve

Why it exists

Before offset-path, creating non-linear animations in pure CSS was difficult. It required complex, brittle @keyframes with dozens of transform: translate() steps to approximate a curve. offset-path provides a declarative way to define a motion trajectory, cleanly separating the "where" of an animation from the "when".

The mental model

Think of offset-path as drawing a track on a map. The property itself just lays down the rails (the path). A separate property, offset-distance, acts as the train engine, telling the element how far along that track it should be. You animate the engine's progress, not the track itself.

How it works

You define a path for an element using the offset-path property. The path can be specified using the same syntax as SVG paths (e.g., path("M 0 0 C 50 50, 150 50, 200 0")) or basic CSS shapes like circle() or polygon(). To make the element move, you create a CSS animation that changes the offset-distance property, typically from 0% to 100%. You can also use offset-rotate to control if the element's orientation follows the curve of the path.

When to use it

Use offset-path for any animation that doesn't follow a straight line. It's perfect for onboarding tours where an indicator follows a curve between elements, for decorative animations where elements orbit a central point, or for creating more natural, fluid transitions that mimic physical motion.

When not to use it

For simple, straight-line transitions between two states, like sliding a menu in from the side, transform: translateX() is simpler. If you need physics-based interactions like gravity or collisions, a JavaScript animation library like GSAP or Framer Motion provides more control. offset-path is for predefined, non-interactive trajectories.

One canonical example

To make a div with the ID #comet travel along an arc, you first define the path, then create an animation to control its progress along it.

#comet { offset-path: path("M 0 50 C 100 -50, 200 150, 300 50"); animation: travel 3s linear infinite; }

@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

Here, offset-path defines a cubic Bézier curve. The travel animation then moves the element from the start (0%) to the end (100%) of that path over 3 seconds.