在animation中最重要的其實就是時間函式（animation-timing-function）這個屬性，他決定了你的動畫將以什麼樣的速度執行，所以最關鍵的屬性值也就是cubic-bezier(n,n,n,n),你平時用到的linear、ease、ease-out等都是基於這個屬性值的，那麼我們接下來就看看這個東西到底是什麼含義。

這個時間函式是通過一個座標反映出來的：

這個就是timing-function的工作圖，總共有4個點來描述整個曲線的運動形狀，其中P0和P3是開始和截止的位置，關鍵位置是P1和P2，那麼P1的座標(x,y)就對應了cubic-bezier(n,n,n,n)

接下來就是關鍵步驟了，將P0、P1連線、P2、P3連線，此時這兩條線就是整條曲線首位的切線，然後發揮自己的想象力想一下，這兩個切線固定，那麼整條曲線基本就可以畫出來了（因為你要平滑連線、不要亂拐彎），不信你可以自己確定兩個點試試，永遠可以畫出一條平滑的曲線。

畫完了，這就是一條運動曲線，那麼怎麼確定動畫的速度呢，其實這條曲線的平陡程度就是動畫快慢的反應，即越陡的部分動畫反應出來就是越快，越平的部分當然動畫反應的就是越慢了。

1.普通動畫介紹

那麼基於這兩個重要的座標，css指定了幾條常用的曲線：

linear         ：  {-webkit-animation-timing-function:cubic-bezier(0,0,1,1);}                    （0,0,1,1）
ease          ：  {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}       （0.25,0.1,0.25,1）
ease-in      ：  {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}               （0.42,0,1,1）
ease-out    ：  {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}               （0,0,0.58,1）
ease-in-out：  {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}          （0.42,0,0.58,1）

後面的就是他們的座標，你可以將cubic-bezier(n,n,n,n)設定成對應值進行動畫比較，是一樣的，這是你就發現其實第一個linear可以換成座標（0.5,0.5,0.5,0.5），總之很多值都可以替換。

豁然開朗了吧！？

這個懂了以後就講正緊的animation屬性吧：

這是w3c官方給出的屬性，即animation共有6個屬性值，具體的請移步w3c官網查詢具體資訊。

2.steps()動畫介紹

那麼，規定了自定義的運動特效，其實有種切線是畫不出來的，就是P0和P3的位置改變了，不將是起始位置了，而且我不僅僅位置變了，P的個數都變了，為了滿足這個需求，並且為了滿足逐幀動畫的實現，就有了steps這個函式；

他的原理是這樣的

steps(n，startORend)有兩個引數，第一個引數表示動畫將分幾步執行完畢，第二個引數表示動畫發生變化的時間點，預設是end，可以不寫，steps（1，start）== step-start，steps（1，end）== step-end。

從前兩個圖中可以看出，step-start表示動畫執行完是結尾的狀態，step-end表示動畫執行完是開始的狀態，在逐幀動畫中設定這兩個值是沒有動畫效果的，必須要分很多步執行才會有效果。

注意我這裡說的哦，你使用step-start、step-end是預設一步完成的，所有會有動畫結束後是什麼狀態，但是你如果有分階段，那麼這時的end和start將不起作用，原因我也不知道，這時你想控制它完成的狀態必須通過animation-fill-mode屬性設定backrwards或者forwards解決，友情提示：這個屬性最好寫相容（animation-fill-mode和-webkit-animation-fill-mode）

----------------------------------------------------------------我可是有底線的---------------------------------------------------------------------

到這裡就基本講完了，希望大家看得洞看得明白，不懂得地方可以和博主討論一下~