transition-timing-function属性 - 前端学习教程_ 前端_前端开发

transition-timing-function属性规定过渡效果的速度曲线，其基本语法格式如下：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

从上述语法可以看出，transition-timing-function属性的取值有很多，其中默认值为"ease"，常见属性值及说明如表1所示。

表1 transition-timing-function属性值

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in	指定以慢速开始，然后逐渐加快的过渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out	指定以慢速结束的过渡效果，等同于cubic-bezier(0,0,0.58,1）。
ease-in-out	指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

在表1中，最后一个属性值“cubic-bezier(n,n,n,n)”中文译为“贝塞尔曲线”，使用贝塞尔曲线可以精确控制速度的变化。但CSS3中不要求掌握贝塞尔曲线的核心内容，使用前面几个属性值可以满足大部分动画的要求。