本文章向碼農們介紹motion-path在css動畫中的使用實例分析，需要的碼農可以參考一下。 使用motion path，作者可以讓圖像物體按照指定的路徑運動。谷歌瀏覽器積極的要實現這個CSS特征，我想主要motion-path是SVG動畫里獨特的亮點，而谷歌瀏覽器已經決定放棄SVG SMIL，所 ...
本文章向碼農們介紹motion-path在css動畫中的使用實例分析，需要的碼農可以參考一下。
使用motion path，作者可以讓圖像物體按照指定的路徑運動。谷歌瀏覽器積極的要實現這個CSS特征，我想主要motion-path是SVG動畫里獨特的亮點，而谷歌瀏覽器已經決定放棄SVG SMIL，所以，實現了CSS中的motion-path，也就能很好的說服哪些喜歡SVG動畫的用戶了。
CSS里的motion-path預防是這樣的：
motion-path: path('M100,250 C 100,50 400,50 400,250');
下麵是三個在CSS里使用motion-path的實例演示。
註意：目前只有谷歌瀏覽器實現了這個功能，請使用最新版的谷歌瀏覽器觀看。
<h1>CSS Motion Path 動畫演示</h1> <p><strong>註意：</strong>目前只有谷歌瀏覽器實現了這個功能，請使用最新版的谷歌瀏覽器觀看。</p> <div class="canvas"> <div class="square square1 path">方塊1</div> <div class="square square2 path">方塊2</div> <svg width="580" height="400" viewBox="0 0 580 400"> <path stroke="#FF2D1A" d="m232.771103,329.79953c-102.829727,-78.900574 -139.598976,-128.812088 -139.897499,-189.912598c-0.270775,-55.699638 45.11657,-109.459106 92.15345,-109.14909c23.485428,0.155491 73.868423,20.65649 91.709885,37.317997c8.990051,8.395851 13.248871,7.567986 33.261871,-6.467178c54.464142,-38.195642 107.654175,-38.997543 142.101776,-2.141006c55.054443,58.903046 45.031464,129.243813 -28.812988,202.207039c-39.259857,38.791107 -124.994751,107.608795 -134.060852,107.608795c-2.761017,0 -28.16275,-17.759216 -56.455643,-39.463959l0,0z" stroke-width="1.5" fill="#fff" /> <path stroke="#181c21" class="path plane" d="m38.056561,4.386863c-0.586136,0 -1.107681,0.240613 -1.547703,0.677117c-0.43961,0.436077 -0.803249,1.060985 -1.105896,1.841453c-0.60508,1.560679 -0.977318,3.753087 -1.180946,6.378638c-0.203182,2.620523 -0.23745,5.671947 -0.153076,8.938395c-7.240604,2.970366 -21.925862,9.103491 -23.10556,10.472843c-1.570616,1.823208 -1.063179,3.912663 -0.430244,5.299751l24.142197,-4.913754c0.510326,6.4035 1.235912,12.745731 1.868229,17.715393c-2.360985,0.690937 -6.76815,2.055286 -7.677814,2.901402c-1.253193,1.165512 -1.253193,4.929501 -1.253193,4.929501l9.88092,-0.80365c0.232769,1.622536 0.378304,2.569187 0.378304,2.569187l0.014431,0.085464l0.077927,0l0.181957,0l0.077995,0l0.014435,-0.085464c0,0 0.145256,-0.946732 0.378227,-2.569187l9.883835,0.80365c0,0 0,-3.763988 -1.253193,-4.929501c-0.91,-0.846428 -5.320366,-2.213829 -7.680691,-2.904591c0.631054,-4.954422 1.355366,-11.272388 1.865307,-17.655201l23.859238,4.85675c0.632927,-1.387089 1.143303,-3.476543 -0.427315,-5.299751c-1.165123,-1.352394 -15.495529,-7.349104 -22.825523,-10.358953c0.087616,-3.308828 0.055405,-6.40176 -0.150143,-9.052284l0,-0.00631c-0.20372,-2.622749 -0.576351,-4.812962 -1.180988,-6.372328c-0.30254,-0.780253 -0.663174,-1.405215 -1.103001,-1.841453c-0.440044,-0.436505 -0.961491,-0.677117 -1.547714,-0.677117l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="2" fill="#05111c" /> </svg> </div>
<!-- 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>
原文地址：http://www.manongjc.com/article/660.html
相關閱讀：
