CSS3属性之Transitions

名称：transition

语法：transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

取值说明：

[ transition-property ]：对象过渡的css属性

[ transition-duration ]：对象过渡的持续时间

[ transition-timing-function ]：对象过渡的动画类型

[ transition-delay ]：对象延迟过渡的时间

说明：复合属性，对象的过渡效果。

名称：transition-property

语法：transition-property ： none | all | [ <IDENT> ] [, <IDENT> ]*

取值说明：

all：所有可以进行过渡的css属性

none：不指定过渡的css属性

<IDENT>：指定要进行过渡的css属性

说明：对象过渡的css属性，默认值为all，多个<IDENT>用逗号分隔。

名称：transition-duration

语法：transition-duration: <time> [, <time>]*

说明：对象过渡的持续时间，默认值为0，多个取值用逗号分隔。

名称：transition-timing-function

语法：transition-timing-function: <single-transition-timing-function> [, <single-transition-timing-function> ]*

取值：

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>,
<number>, <number>)

取值说明：

linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：逐渐变慢。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：加速。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：减速。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：加速然后减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start：等同于steps(1, start)

step-end：等同于steps(1, end)

steps(<integer>[, [ start | end ] ]?)：参数<integer>表示分为几步完成过渡，取值正整数，另外一个参数可选，取值 start 或者 end，指定时间间隔内值发生变化的点，不取值则默认为 end

cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

说明：对象过渡的动画类型，默认值ease，多个取值用逗号分隔。

名称：transition-delay

语法：transition-delay: <time> [, <time>]*

说明：对象延迟过渡的时间，默认值为0，多个取值用逗号分隔。

注释：对象的过度效果，可以通过 transition 缩写的方式指定，也可以分别对 transition-property、transition-duration、transition-timing-function、transition-delay对其分别设置，例如下面的书写方式是一样的：

代码片段 1：

transition: all 5s ease 2s;

代码片段 2：

transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 2s;