With the release early this year of Firefox 72, the CSS Motion Path specification is now implemented in most browsers. With CSS Motion Path, developers can implement a larger range of complex animations without resorting to JavaScript, or importing full-featured animation libraries like GSAP (GreenSock Animation Platform).
The CSS Motion path specification describes a set of properties that allow authors to position any graphical object and animate it along an author specified path. The object can be positioned, transitioned and animated along this path over a period of time. The time may be static if no animation was specified.
[Source: CSS Motion Path Working Draft]
The CSS Motion Path specification defines four properties:
The Motion Path module allows specifying the position of a box as the distance (offset-distance) of the box’s anchor point (offset-anchor) along a geometrical path (offset-path) defined against the coordinates (offset-position) of its containing block. The box’s orientation can optionally be specified as a rotation (offset-rotate) with respect to the direction of the path at that point.
The offset path property represents the geometrical path objects which will follow. Of the few proposed values in the specifications for the property, only path() (which takes a path string with SVG coordinate syntax) seems to be supported uniformly:
.rocket {
offset-path: path('M1345.7 2.6l2.4-4.4');
}
An animation can then be defined to animate the object’s element between different values by means of the offset-distance property. A value of 0% means the object is positioned at the start of the path. A value of 100% means the object is positioned at the end of the path:
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
With the keyframes defined, the animation can be configured with the animation property:
animation: move 3000ms infinite alternate ease-in-out;
The offset-rotate property allows developers to specify how much to rotate the object’s box being animated. By default, the center of an object’s box is positioned on the path. The offset-anchor property allows developers to position another point of the box on the path. The property offset-path can also be animated.
The following two animations by Facundo Corradini illustrate the animations which can be achieved with CSS Motion Path without any JavaScript.
Before CSS Motion Path, moving elements through a path required a conscious and precise use of simultaneous translation and rotation, skills in handling browser discrepancies, and often resulted in a very complex set of keyframes. JavaScript developers could also resort to JavaScript animation libraries like GSAP. While CSS Motion Path does not entirely eliminate the need for animation libraries (it is supported for three-quarters of user browsers and not supported by Safari), it does raise the threshold for usage of such libraries.
CSS Motion Path is still in the Working Draft status. Firefox support landed in January this year. Chrome support is effective since version 46 (behind the #enable-experimental-web-platform-features flag). With the Chromium-based released also in January this year, the Edge browser also supports CSS Motion Path.