Use motion-path in CSS animation,

Use motion-path in CSS animation,

This article describes how to use motion-path in css animation to analyze examples. For more information, see.

Using the motion path, the author can make the image object move according to the specified path. Google Chrome is actively implementing this CSS feature.motion-pathIt is a unique highlight in SVG animation, and Google browser has decided to abandon svg smil, so it implementsmotion-pathTo persuade users who like SVG animation.

In CSSmotion-pathThe prevention is as follows:

motion-path: path('M100,250 C 100,50 400,50 400,250');

Below are three examples used in CSS:motion-path.

Note:Currently, this function is only available in Google Chrome. Use the latest version of Google Chrome for viewing.

<H1> CSS Motion Path animation demonstration 
 
<!-- Port of animateMotion example http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement --><svg width="5cm" height="3cm"  viewBox="0 0 500 300"     xmlns="http://www.w3.org/2000/svg" version="1.1"     xmlns:xlink="http://www.w3.org/1999/xlink" >  <rect x="1" y="1" width="498" height="298"        fill="none" stroke="blue" stroke-width="2" />  <path id="path1" d="M100,250 C 100,50 400,50 400,250"        fill="none" stroke="blue" stroke-width="7.06"  />  <circle cx="100" cy="250" r="17.64" fill="blue"  />  <circle cx="250" cy="100" r="17.64" fill="blue"  />  <circle cx="400" cy="250" r="17.64" fill="blue"  />  <!-- Here is a triangle which will be moved about the motion path.       It is defined with an upright orientation with the base of       the triangle centered horizontally just above the origin. -->  <path id="triangle" d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"        fill="yellow" stroke="red" stroke-width="7.06"  >       </path>  </svg>
 
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450" viewBox="500 150 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 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="first" 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="second" 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>
Address: http://www.manongjc.com/article/660.html
Related reading:
Usage of several animation elements in SVG
A simple animation implemented by native javascript
JavaFX Animation earth rising
JavaFX Animation path Animation instance
An example of switching an accordion written in pure css