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),通过设置这两点的坐标,我们可以定义曲线的增速,我们设置的参数值为特定数值时,对应的特效如下表
|
|
|
|
|
|
|
|
|
|
除了上面特定值的设置,当然也可以设置其他的属性值,只要保证x1, y1, x2, y2 的值在 0到1 之间就可以。