CSS3 transition-timing-function 属性

transition-timing-function属性定义了CSS过渡效果的速度曲线。换句话说，它决定了元素在动画过程中的速度变化。该属性可以控制过渡期间元素的过渡曲线，也可以控制元素过渡的速度。它可以调整属性更改的时间。不同的速度曲线产生不同的效果。

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|step-start|step-end|steps(n,start|end)

ease：默认值，缓慢开始，加速后急刹车。
linear：匀速，没有加速和减速。
ease-in：缓慢开始、加速后急刹车。
ease-out：快速启动，减速减慢停止。
ease-in-out：缓慢开始、加速后急刹车，然后反向执行该过渡过程。
cubic-bezier：使用贝塞尔曲线定义自定义的时间函数。该属性定义了一个3次贝塞尔函数。值必须在0到1之间。
step-start：开始阶段立即开始过渡，不进行动画缓动。
step-end：结束阶段立即停止过渡，也不进行动画缓动。
steps(n,start|end)：这个函数分成许多n步。每个步骤完成后，呈现last（end或start）状态。默认情况下，如果仅指定数量，则将 last 状态放置在中心。

使用cubic-bezier函数自定义速度曲线：

div {
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

使用steps()函数将步数分为10步和结束状态：

div {
  transition-timing-function: steps(10, end);
}

transition-timing-function属性定义CSS过渡的速度曲线。通过使用不同的值，您可以更改元素属性在过渡期间发生的速度。ease是默认值，也是最常用的值。您还可以使用cubic-bezier函数自定义速度曲线，或通过steps()函数将步数分解为每个动画状态。