CSS transition-timing-function 属性用于指定元素过渡动画效果的速度曲线。
transition-timing-function属性会建立一条加速度曲线，在整个transition变化过程中，变化速度可以不断改变。
这条加速度曲线被<timing-function>所定义，然后作用到每个CSS属性的过渡动画中。<timing-function>描述了在CSS动画过程中过渡或动画的改变速度。它实际上是定义了一个加速度曲线，以便动画的速度在CSS动画的过程中可以进行改变。这些函数通常被称为缓动函数。
你可以为transition-timing-function指定一个或多个值，多个值之间使用逗号来分隔。多个动画过渡延迟时间值会和其它过渡动画属性一一对应。例如，如果你提供了2个动画过渡延迟时间，那么第一个transition-timing-function值决定transition-property属性的第一个属性的速度曲线，第二个transition-timing-function值决定transition-property属性的第二个属性的速度曲线。
官方语法
transition-timing-function: <timing-function>
参数：
- <timing-function>：使用<timing-function>类型来设置过渡动画的速度曲线。
transition-timing-function属性的初始值为ease。
应用范围
transition-timing-function属性可以应用所有元素，以及:before和:after伪元素上。
示例代码
transition-timing-function: linear; transition-timing-function: cubic-bezier(0.42, 0, 1, 1); /* 相对于 "ease-in" 效果 */ transition-timing-function: steps(4, start); transition-timing-function: ease-in-out;
在线演示
下面的例子演示了各种transition-timing-function的效果。它们分别为:ease-in-out、cubic-bezier(0.42, 0, 1, 1);和steps(4, start)。
1
2
3
浏览器支持
CSS3 transition-timing-function属性的浏览器兼容性列表如下：
