Note: There are a few cases of duplicates in user autocompletion which are being worked on.
Last Comment Bug 1186329 - [META] Implement Motion Path Module Level 1
: [META] Implement Motion Path Module Level 1
Status: NEW
: dev-doc-needed, DevAdvocacy
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: Trunk
: All All
P3 enhancement with 22 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
Blocks: all-css-modules
  Show dependency treegraph
Reported: 2015-07-22 00:04 PDT by yiorsi
Modified: 2017-06-13 16:21 PDT (History)
19 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

Chrome-test.png (173.94 KB, image/png)
2016-05-18 02:25 PDT, percyley
no flags Details

Description User image yiorsi 2015-07-22 00:04:03 PDT Comment hidden (obsolete)
Comment 1 User image yiorsi 2015-07-22 00:06:08 PDT
The editors' draft specification is available at

Motion paths allow authors to animate elements along an author-specified 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 a CSS equivalent to the animateMotion tag, but for all HTML and SVG elements. (animateMotion only works with SVG elements, and only in browsers that support SMIL.)

The following CSS properties are implemented and proposed for shipping:
motion-path: none | path(<string>)
motion-offset: <length> | <percentage>
motion-rotation: [ auto | reverse ] && <angle>
motion: <motion-path> && <motion-offset> && <motion-rotation>

When the motion-offset 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.

The following motion-path options from the spec are not implemented or proposing for shipping at this time:  <url> , <basic-shape> , <geometry-box> , path <fill-rule>
Comment 2 User image percyley 2016-05-18 01:59:23 PDT
@Astley Chen Are you going to support this feature?
Comment 3 User image Astley Chen [:astley] 2016-05-18 02:13:43 PDT
(In reply to percyley from comment #2)
> @Astley Chen Are you going to support this feature?

It's under consideration now, would you like to share your thoughts against the spec stability and current support level of browsers ? Your feedback is welcome.
Comment 4 User image percyley 2016-05-18 02:25:54 PDT
Created attachment 8753754 [details]
Comment 5 User image percyley 2016-05-18 02:36:50 PDT
Chrome 46+ and Opera 33+ support this, but not fully supported.

They only support motion-path: none|path(). See

I think the next CSS specification will have more SVG features, developers are also very much look forward to these characteristics, such as the recent mozilla implementation of the background-clip: text.
Comment 7 User image David Baron :dbaron: ⌚️UTC-7 2016-05-18 09:05:53 PDT
There were significant changes to this specification agreed at the CSS working group's face-to-face meeting last week, to merge this specification with the polar positioning feature in CSS round display.  We should wait until those changes shake out before working on an implementation here.
Comment 8 User image percyley 2016-09-23 02:40:40 PDT
The specification has now been greatly changed:

motion-offset -> offset-distance
motion-path -> offset-path
motion-rotation -> offset-rotation
motion -> offset



offset-path(motion-path) add <angle> and <size>

Chrome has fully implemented the new specification:!msg/blink-dev/o1C5NzGf9Q0/sbaLF1MbAgAJ
Comment 9 User image Sebastian Zartner [:sebo] 2017-06-09 06:31:26 PDT
(In reply to percyley from comment #8)
> Chrome has fully implemented the new specification:
> sbaLF1MbAgAJ

As far as I can see, Chrome doesn't support the 'offset' shorthand as defined in the spec. yet.


Note You need to log in before you can comment on or make changes to this bug.