CSS-only path-based animations are now a reality in Chrome, thanks to a recent update! This means you can ditch the animation libraries and create smooth, dynamic path animations using CSS alone.

CSS Motion Path

Move your elements around any path on your web pages using CSS Motion Path! This powerful CSS feature allows you to animate any element along any custom path, with just two properties: offset-path and offset-distance.

1. offset-path specifies the path you want your element to follow, and

2. offset-distance specifies how far along that path the element has traveled at any given time. Using these two properties, you can create smooth, dynamic animations that will bring your web pages to life.

Example

Let us understand this with an example

Let's say you want to animate a div on a circular path. Here's how you can do it:

1. First, create the div element

    <div class="container"></div>
   

2. Then assign this CSS property to that element offset-path:circle(100px at 50vw 50vw), here first value of the circle function is the radius and 2 values after at is the coordinate of the circle from the top left of the viewport.

3. then create a keyframe animation

    @keyframes motion {
      0% {
        offset-distance: 0%;
      }
      100% {
        offset-distance: 100%;
      }
    }
   

4. add this animation to the div element

    animation: motion 2s linear infinite;
   

   there are other functions as well like rect(), inset(), ellipse(), xywh(), polygon() etc. use the below playground to play around with some of these functions. You can refer to this page for more details.

Pitfall

Currently, Motion Path is only available in Chrome and Edge.

Thanks for reading.