CSS - motion-path

Example

 

The following example is excerpted from a sample that may be viewed live on GitHub in a supporting browser. The SVG in the second code sample is a simple drawing of a house with a chimney. The motion-path properties in the first code sample move a pair of scissors along the outside border of the house. Notice the :path() pseudo class in the motion-path property and the <path> element in the SVG. If you compare them, you'll find they are identical.

CSS
#firstScissorHalf {
  motion-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
}

#secondScissorHalf {
  motion-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
}

 

XML
<svg xmlns="http://www.w3.org/2000/svg"
     width="700"
     height="450"
     viewBox="350 0 1400 900">
  <rect x="595"
        y="423"
        width="610"
        height="377"
        fill="blue" />
  <polygon points="506,423 900,190 1294,423"
           fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300"
           fill="red" />
  <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
        fill="none"
        stroke="black"
        stroke-width="13"
        stroke-linejoin="round"
        stroke-linecap="round" />
  <path id="firstScissorHalf"
        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
        transform="translate(0,0)"
        fill="green"
        stroke="black"
        stroke-width="5"
        stroke-linejoin="round"
        stroke-linecap="round"
        fill-rule="evenodd" />
  <path id="secondScissorHalf"
        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
        transform="translate(0,0)"
        fill="forestgreen"
        stroke="black"
        stroke-width="5"
        stroke-linejoin="round"
        stroke-linecap="round"
        fill-rule="evenodd" />
</svg>

Syntax  

TBD

Formal syntax

CSS
<a href="css/url" title=""><url></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/motion-path#basic-shape"><basic-shape></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <path()> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/motion-path#geometry-box"><geometry-box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none<p>where <br><code><basic-shape> = <a href="css/motion-path#inset()"><inset()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/motion-path#circle()"><circle()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/motion-path#ellipse()"><ellipse()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/motion-path#polygon()"><polygon()></a><br><geometry-box> = <a href="css/motion-path#shape-box"><shape-box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> fill-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> stroke-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> view-box</code></p><p>where <br><code><inset()> = inset( <a href="css/motion-path#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,4<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> round <border-radius> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><circle()> = circle( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/motion-path#shape-radius"><shape-radius></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><ellipse()> = ellipse( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/motion-path#shape-radius"><shape-radius></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><polygon()> = polygon( <a href="css/motion-path#fill-rule"><fill-rule></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/motion-path#length-percentage"><length-percentage></a> <a href="css/motion-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> )<br><shape-box> = <a href="css/motion-path#box"><box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> margin-box</code></p><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><shape-radius> = <a href="css/motion-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> closest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-side<br><position> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a>  <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> && <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/percentage" title=""><percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><fill-rule> = nonzero <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> evenodd<br><box> = border-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> padding-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> content-box</code></p>

Description  

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The motion-path CSS property specifies the motion path where the element gets positioned. The exact element’s position on the motion path is determined by the motion-offset property. A motion path is either a specified path with one or multiple sub-paths or the geometry of a not styled basic shape. Each shape or path must define an initial position for the computed value of "0" for motion-offset and an initial direction which specifies the rotation of the object to the initial position.

In this specification, a direction (or rotation) of 0 degrees is equivalent to the direction of the positive x-axis in the object’s local coordinate system. In other words, a rotation of 0 degree points to the right side of the UA if the object and its ancestors have no transformation applied.

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 46.0 No support No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 46.0 No support No support No support No support No support 46.0

Specifications  

Specification Status Comment
Motion Path Module Level 1
The definition of 'motion-path' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/motion-path

CSS