今天要說的是css的動畫曲線。
首先要說的是語法：
value:
1.linear：線性動畫，也就是勻速，以相同的速度開始以相同的速度結束。
2.ease：預設的動畫效果，特點是先快後慢，時間為50%的時候已經完成80%的動畫效果了。
3.ease-in：動畫進行過程中一直加速。
4.ease-out：動畫進行過程中一直減速。
5.ease-in-out：與ease很相似，都是先加速後減速，但是時間為50%的時候完成動畫的50%。
6.cubic-bezier(n,n,n,n)： 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。
**如下圖所示：
現在要說的是三次貝賽爾曲線（cubic-bezier）
1.含義
貝塞爾曲線通過控制曲線上的四個點（起始點，終止點以及兩個相互分離的中間點）來創造，編輯圖形，繪製出一條光滑的曲線並以曲線的狀態反映動畫過程中速度的變化。
2.規則
x的取值區間是【0,1】，取值超過該區間cubic-bezier即無效，y的取值範圍沒有限制【-0.5,0.5】,也是可以的，但不應該超出【0，1】範圍太大。
3.舉例說明
①linear對應自定義cubic-bezier(0,0,1,1)，效果為勻速運動，如下圖所示
②ease對應自定義cubic-bezier(.25，.01，.25,1)，效果為先慢後快再慢，如下圖所示
③ease-in對應自定義cubic-bezier(.42,0,1,1)，效果為先慢後快，如下圖所示
④ease-out對應自定義cubic-bezier(0,0,.58,1)，效果為先快後慢，如下圖所示
⑤ease-in-out對應自定義cubic-bezier(.42,0,.58,1)，效果為先慢後快再慢，如下圖所示
4.用**形式表現如下圖所示
這就是css3 transition-timing-function 屬性的相關分享了，希望可以有所幫助。
CSS3 貝賽爾曲線
在了解cubic bezier之前，你需要對 css3 中的動畫效果有所認識，它是animation timing function和transition timing function中乙個重要的內容。cubic bezier又稱三次貝塞爾，主要是為animation生成速度曲線的函式，規定是cu...
三次貝塞爾曲線畫圓的方法。
void cubicto float x1,float y1,float x2,float y2,float x3,float y3 什麼意思呢。就是從我們的最後乙個點出發以接近 x1,y1 x2,y2 這兩個點的方向走最後結束在 x3,y3 點。什麼叫接近呢？比方y 1 x 3 這個函式的軌跡當x...
css3 動畫（二）貝塞爾曲線
有過渡效果的屬性 過渡時長 過渡函式？過渡時延 其中，1 2 以及 4 都挺好理解的，但是3是個什麼東西？其實3是 css3 中的 timing function，其中3有兩種型別的值 本篇就總結一下 cubic bezier x1,y1,x2,y2 立方貝塞爾曲線 貝塞爾曲線 bezier cur...