自從CSS3引入了動畫（transition和@keyframes，還有與之搭配的transform）之后，寫動畫也變的越來多越來越容易。
可是當我們遇到需要利用數學公式的復雜動畫時，卻一籌莫展，只能怪小時候數學沒學好（可能是語文老師教的）。那么問題來了，但我拿到要實現這樣的需求，該如何：
可能我們會去苦惱，加班熬夜的去補功課去解決，可是這樣真的很費勁，那么，我們就來分析一下如何，快速解決
要想做出這樣的動畫，我們必先知道其運動的原理，不是嗎，鑒於拋物線太多了，這里只對最簡單的勻變速曲線運動做分享，看圖：
好不容易找到了一張小圖，是不是有點讀高中物理課的感覺
運動原理可以分解為：水平方向勻速運動，垂直方向重力加速度運動
位移途徑為： 1. （水平）s = vt 2.（垂直）h = gt*t/2
假如我們已起拋點為原點，就可以根據運行時間，計算出，物體x軸、y軸運行的距離，通過細時間間隔，利用css3屬性tanslate3d（x，y，z）進行精細的位移，那么我們就能形成拋物線運動了， 那么我們試驗一下。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拋物線</title> <style> body{background: #8fd5d5;} /******拋物線******/ .ball{ width:20px; height:20px; background:yellow; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer } /********水平移動距離600 速度 200m/s 重力加速度的運動速度**************/ .tab span{ display:inline-block; padding:10px; color:#fff; border:2px solid #59AEAE; } .animg{-webkit-animation:pao 3s linear both;} .animg50{-webkit-animation:pao50 3s linear both;} .animg100{-webkit-animation:pao100 3s linear both;} @-webkit-keyframes pao{ 0%{-webkit-transform:translate3d(0px,0,0)} 10%{-webkit-transform:translate3d(60px,0.45px,0)} 20%{-webkit-transform:translate3d(120px,1.8px,0)} 30%{-webkit-transform:translate3d(180px,4.05px,0)} 40%{-webkit-transform:translate3d(240px,7.2px,0)} 50%{-webkit-transform:translate3d(300px,11.25px,0)} 60%{-webkit-transform:translate3d(360px,16.2px,0)} 70%{-webkit-transform:translate3d(420px,22.05px,0)} 80%{-webkit-transform:translate3d(480px,28.8px,0)} 90%{-webkit-transform:translate3d(540px,36.45,0)} 100%{-webkit-transform:translate3d(600px,45px,0)} } @-webkit-keyframes pao50{ 0%{-webkit-transform:translate3d(0px,0,0)} 10%{-webkit-transform:translate3d(60px,2.25px,0)} 20%{-webkit-transform:translate3d(120px,9px,0)} 30%{-webkit-transform:translate3d(180px,20.25px,0)} 40%{-webkit-transform:translate3d(240px,36px,0)} 50%{-webkit-transform:translate3d(300px,56.25px,0)} 60%{-webkit-transform:translate3d(360px,81px,0)} 70%{-webkit-transform:translate3d(420px,110.25px,0)} 80%{-webkit-transform:translate3d(480px,144px,0)} 90%{-webkit-transform:translate3d(540px,182.25,0)} 100%{-webkit-transform:translate3d(600px,225px,0)} } @-webkit-keyframes pao100{ 0%{-webkit-transform:translate3d(0px,0,0)} 10%{-webkit-transform:translate3d(60px,4.5px,0)} 20%{-webkit-transform:translate3d(120px,18px,0)} 30%{-webkit-transform:translate3d(180px,40.5px,0)} 40%{-webkit-transform:translate3d(240px,72px,0)} 50%{-webkit-transform:translate3d(300px,112.5px,0)} 60%{-webkit-transform:translate3d(360px,162px,0)} 70%{-webkit-transform:translate3d(420px,220.5px,0)} 80%{-webkit-transform:translate3d(480px,288px,0)} 90%{-webkit-transform:translate3d(540px,364.5,0)} 100%{-webkit-transform:translate3d(600px,450px,0)} } .margin{margin-top:450px} </style> </head> <body> <h2>拋物線運動曲線 水平移動距離600px 速度 200px/s 默認垂直方向為重力加速度</h2> <div class="tab"> <span class="sg">垂直方向重力加速度</span> <span class="sg50">垂直方向50px/s</span> <span class="sg100">垂直方向100px/s</span> </div> <div class="ball sg"></div> <script type="text/javascript"> document.querySelector(".sg").onclick =function(){ document.querySelector(".ball").className = "ball animg"} document.querySelector(".sg50").onclick =function(){ document.querySelector(".ball").className = "ball animg50"} document.querySelector(".sg100").onclick =function(){ document.querySelector(".ball").className = "ball animg100"} </script> </body> </html>
在演示效果中，我們發現，水平方向勻速運動一定，垂直方向的加速度越大時，所細分的做出的動畫拋物線效果越不好，得出結論就是我們為了保持更好的拋物線效 果，時間比例細分越小，移動的距離越精細，拋物線效果動畫越好。可是，問題來了，為了做精細的拋物動畫，給我們帶來的問題，就是要花更多的時間去計算精細 的值，可這非常需要時間……
為了更好的解決以上的這個問題，分享一款更好用的動畫神器—Stylie 用戶界面簡潔大方，使用簡單
頁面打開以后很簡單，藍色的網格背景上面，兩個綠色的十字中間連着一根黃色的線，上面有一個白色小球不斷地從左邊滑動到右邊（還稱不上滾動），下面有一個進度條，右邊有一個操作面板。
Keyframes標簽設置面板：
1.第一個0ms處表示起點相關信息，第二個2000ms處表示2000ms處斷點的相關信息；
2.第一個0ms處表示起點相關信息，第二個2000ms處表示2000ms處斷點的相關信息；
3.X和Y分別表示橫坐標及縱坐標（其實你也可以用鼠標去拖綠色的十字…）；
4.S表示縮放倍率（默認是1）；
5.rX、rY、rZ分別表示物體沿X、Y、Z軸的旋轉角度（具體哪個軸是哪個可以在上面填寫數字自己嘗試，出於便於觀察的理由建議填寫180。當然你也可以按住Shift鍵，拖，但是我覺得這樣很不好控制…）；
6.linear表示線性的…這一欄是自定義緩動曲線（Easing curves）
Motion是自定義緩動曲線運動軌跡，可以在Keyframes選擇里面添加你自定義的運動軌跡。
我覺得這個神器最牛逼的功能在於，緩動曲線功能所有的數值，都！可！以！定義緩動，讓我們輕松完成拋物線運動動畫。