Intent to Implement: CSS Motion Path

Skip to first unread message


Nov 17, 2014, 11:22:28 PM11/17/14

Contact emails


Motion Path Module Level 1 - Editor’s Draft


Motion paths allow authors to animate elements along an author-specified path.

The following CSS properties are defined:




motion (shorthand)

When the motion-position property is animated, for example using Web Animations, the element moves along the path.

When motion-rotation is 'auto' (the default), the element automatically rotates as it follows the path.

Motion path animation provides an easy way for authors to declaratively specify animation of an element along a sequence of lines, arcs or splines. This is equivalent to SVG's animateMotion tag, but for all HTML and SVG elements (SMIL's animateMotion only works with SVG elements).


Declarative motion path animation enables developers to easily make and maintain products with animated elements moving smoothly along paths.

Compared to complex solutions using requestAnimationFrame, the author's task of specifying the motion is greatly simplified, and the platform's task of providing a smooth 60 frames per second is also made easier.

Compatibility Risk

The motion path proposal has been positively received by the CSS Working Group - see minutes:

Ongoing technical constraints


Design Doc for implementation in Blink

Will this feature be supported on all five Blink platforms (Windows, Mac, Linux, Chrome OS and Android)?


OWP launch tracking bug

Entry in Chromium Feature Dashboard

Tab Atkins Jr.

Nov 18, 2014, 7:16:45 PM11/18/14
to Eric, blink-dev

Motion around the page is basically impossible to write by hand in all
but the most trivial cases; you need a tool to decompose the motion
path into independent x and y motions synced in keyframes. This is
not only complicated and stupid, it's also inefficient, as it makes
for giant @keyframes rules. The 'motion' property is a huge
improvement over this, and is really simple to use. +1


Douglas Stockwell

Nov 19, 2014, 6:27:02 PM11/19/14
to Tab Atkins Jr., Eric, blink-dev

Motion path animation is an important capability which was previously only available to SVG. As adding these new properties to CSS requires no additional primitives in the Web Animations API, the 'MotionPathEffect' API has now been removed from the Web Animations spec:
Reply all
Reply to author
0 new messages