CSS motion path

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

The CSS 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 rectangular transform function coordinates.
• Animating an element along a defined path.

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

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