CSS3属性——transition-timing-function

transition-timing-function:定义以相同的速度从开始到结束的过渡效果，W3C是这样解释的

 前五个属性值很容易理解，最后那个cubic-bezier(n,n,n,n)可以说是最难的了，我们借助下面这张图去理解。

 

我们先将 cubic-bezier 的形式变为cubic-bezier(x1, y1, x2, y2)

图上有四点，P0-3，其坐标的取值范围为 0-1，其中P0和P3是默认不变的点，对应坐标[0, 0]和[1, 1]，而P1和P2两点的坐标就是cubic-bezier的参数，P1(x1, y1)，P2(x2, y2)，通过设置这两点的坐标，我们可以定义曲线的增速，我们设置的参数值为特定数值时，对应的特效如下表

ease	cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1.0)

 

 

 

 

  

 

除了上面特定值的设置，当然也可以设置其他的属性值，只要保证x1, y1, x2, y2 的值在 0到1 之间就可以。