例子：transition:all 1s cubic-bezier(.21,.2,.65,.1)
最近在看animation模塊，其中animation-timing-function 和 transition-timing-function兩個屬性來控制動畫速度分別提供了ease，liner，ease-in，ease-out，ease-in-out幾個預設速度，還可以同過cubic-bezier來自定義速度，想要深入了解CSS3動畫，實現隨心所欲的動畫效果，還是有必要理解下其中的原理。
CSS3動畫速度的控制通過三次貝塞爾曲線函數實現，定義規則為
cubic-bezier (x1,y1,x2,y2)
原理:
看一下什么是三次貝塞爾曲線，以及這幾個參數的含義：
貝塞爾曲線坐標系
貝塞爾曲線通過控制曲線上的四個點（起始點、終止點以及兩個相互分離的中間點）來創造、編輯圖形，繪制出一條光滑曲線並以曲線的狀態來反映動畫過程中速度的變化。
參數點
分別用A,B,C,D表示這四個點，其中起始點固定值為A(0,0),終止點固定為D(1,1)剩下的中間點B(x1,y1),C(x2,y2)也就是所要動態操控的兩個點了,對應cubic-bezier (x1,y1,x2,y2)中的四個參數,通過改變B,C兩點的坐標值來動態生成一條貝塞爾曲線表示動畫中的速度變化。
規則
x的取值區間是[0,1],取值超過該區間cubic-bezier即無效,y的的取值區間沒有限制[-0.5,0.5]也是可以的,但不應該超出[0,1]范圍太大。
CSS3提供的幾個預設速度：
ease 對應自定義cubic-bezier(.25,.01,.25,1),效果為先慢后快再慢；
ease效果
linear 對應自定義cubic-bezier(0,0,1,1)，效果為勻速直線；
linear效果
ease-in 對應自定義cubic-bezier(.42,0,1,1),效果為先慢后快；
ease-in效果
ease-out 對應自定義cubic-bezier(0,0,.58,1),效果為先快后慢；
ease-out效果
ease-in-out 對應自定義cubic-bezier(.42,0,.58,1),效果為先慢后快再慢。
ease-in-out效果
用法
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .linear { width: 50px; height: 50px; background-color: #ff0000; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -o-transition: all 2s linear; transition: all 2s linear; } .linear:hover { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } .custom { width: 50px; height: 50px; background-color: #00ff00; -webkit-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31); -moz-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31); -o-transition: all 2s cubic-bezier(.94,-0.25,.32,1.31); transition: all 2s cubic-bezier(.94,-0.25,.32,1.31); } .custom:hover { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); transform: translateX(200px); } </style> </head> <body> <div class="linear"></div> <div class="custom"></div> </body> </html>
demo中紅色方塊采用預設速度liner呈現勻速直線運動，綠色方塊采用自定義cubic-bezier(.94,-0.25,.32,1.31),呈現蓄力加速效果。
bezier曲線圖：
