CSS motion path

TheCSS motion path module allows authors to animate any graphical object along a custom path.

TheCSS transforms module provides features that enable boxes to be repositioned, rotated, scaled, and skewed relative to its laid out position, without disrupting the layout of any other elements on the page. These transforms can be animated and transitioned, but only in relatively basic ways.

The features of the CSS motion path module provide offset transforms: transforms that align a point on an element to an offset distance along an offset path, optionally rotating the transformed element to follow the path direction. This module enables powerful transform possibilities, for example:

Positioning using polar coordinates rather than limiting transformation to the standard rectangulartransform function coordinates.
Animating an element along a defined path.

CSS motion paths allow the definition of complex 2D spatial transitions by leveragingCSS shape functions.

For example, you can define a specific path of any shape you want with theoffset-path property. You can then animate an element to move along that path by animating theoffset-distance property, and rotate it at any point with theoffset-rotate property.

Motion paths in action

<div>  <div></div></div>

#motion-demo {  offset-path: path(    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"  );  animation: move 3000ms infinite linear;  width: 10px;  height: 10px;  background: red;}#heart {  width: 200px;  height: 200px;  background-color: lightpink;  clip-path: path(    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"  );}@keyframes move {  100% {    offset-distance: 100%;  }}

In this example, we usedCSS masking andCSS shapes to clip a container with a light pink background into a heart shape. We used apath() function as the value of theclip-path property. Its child is a10px by10px red box that is made to follow the edge of its parent. We did this by using the same<basic-shape> as the path, setting the box'soffset-path property to the samepath() function value. We usedCSS animations to change theoffset-distance from0% to100% over three seconds.