好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

transition-timing-function

CSS transition-timing-function 属性用于指定元素过渡动画效果的速度曲线。

transition-timing-function 属性会建立一条加速度曲线,在整个transition变化过程中,变化速度可以不断改变。

这条加速度曲线被所定义,然后作用到每个CSS属性的过渡动画中。描述了在CSS动画过程中过渡或动画的改变速度。它实际上是定义了一个加速度曲线,以便动画的速度在CSS动画的过程中可以进行改变。这些函数通常被称为缓动函数。

你可以为 transition-timing-function 指定一个或多个值,多个值之间使用逗号来分隔。多个动画过渡延迟时间值会和其它过渡动画属性一一对应。例如,如果你提供了2个动画过渡延迟时间,那么第一个 transition-timing-function 值决定 transition-property 属性的第一个属性的速度曲线,第二个 transition-timing-function 值决定 transition-property 属性的第二个属性的速度曲线。

官方语法
transition-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) 。

浏览器支持

CSS3 transition-timing-function 属性的浏览器兼容性列表如下:

查看更多关于transition-timing-function的详细内容...

  阅读:44次

上一篇: :focus

下一篇::nth-child()