有過渡效果的屬性
過渡時長
過渡函式？
過渡時延
其中，1、2 以及 4 都挺好理解的，但是3是個什麼東西？其實3是 css3 中的 timing-function，其中3有兩種型別的值：
本篇就總結一下 cubic-bezier(x1, y1, x2, y2)：立方貝塞爾曲線
貝塞爾曲線（bezier curve）是計算機圖形學中重要的引數曲線，它通過乙個方程來描述一條曲線。根據方程的最高端數，可以分為線性貝塞爾曲線、二次貝塞爾曲線、三次貝塞爾曲線以及更高次的貝塞爾曲線。
貝塞爾曲線掃盲
在css3中使用的 cubic-bezier() 函式，是乙個三次貝塞爾曲線函式。
三次貝塞爾曲線中四個點，在 cubic-bezier() 中：
cubic-bezier(x1, y1, x2, y2) 接受的引數便是 p1(x1, h1) 和 p2(x2, y2) 的座標。
那我們怎麼獲取我們想要的貝塞爾曲線呢？進這個 **
在上面那個 ** 中，我們可以通過拖拽 p1 和 p2 點，來改變兩點的座標，從而產生一條曲線。
那麼這條曲線代表什麼含義呢？
由於時間是勻速增加的，進度增加的快慢是受斜率（速度）影響的。所以這是一條表示進度變化快慢的速度曲線
這個進度在 css 中，實際指的就是樣式變化前後的值。如：
最終效果如下：
我們知道，平拋運動可以分解為兩個方向的運動：
這樣，我們就可以分解為水平和垂直方向上的過渡效果：
.ball
/* 終點 */
.ball.end
來獲得平拋運動的動畫效果
其中，cubic-bezier() 函式的引數，可以在 ** 裡自定義點的位置，然後得到自己想要的速度變化曲線。
在平拋運動垂直方向的速度曲線大概是這樣子的：
這樣，我們就知道了 cubic-bezier() 函式的引數（中的這條曲線，其實就可以看做是實際的平拋的曲線）
**及效果：
css3 中的貝塞爾曲線其實很簡單：一條以時間為橫座標，以進度為縱座標的和速度相關的曲線，它表示了過渡/動畫中間狀態的變化快慢。
CSS 貝塞爾曲線 cubic bezier
cubic bezier又稱三次貝塞爾，主要是為animation生成速度曲線的函式，規定是cubic bezier 我們可以從下圖中簡要理解一下cubic bezier 從上圖我們需要知道的是cubic bezier的取值範圍 我們需要關注的是 p1 和 p2 兩點的取值，而其中x 軸的取值範圍是...
貝塞爾曲線
1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線，貝茲曲線由 線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...
貝塞爾曲線
由於工作需要，最近在研究乙個類似qq訊息劃掉的效果 很多強迫症患者童鞋對這個簡直是愛不釋手，當然這個也包括我自己 貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點座標繪製出的一條 光滑曲線 在歷史上，研究貝塞爾曲線的人最初是按照已知曲線 引數方程 來確定四個點的思路設計出這種向量曲線繪製法。貝...