CSS3过渡Transition

一、过渡（Transition）

−允许css的属性值在一定的时间区间内平滑地过渡
（一个元素从一种表现形态到另一种表现形态。用CSS美化，CSS值发生变化。即一个元素，它的属性从一个值变化到另一个值。）

−CSS效率高，瞬间变化，速度快。在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

【兼容性】
IE10+、FireFox16+、Chrome26+、safari6.1+、Opera12.1+

二、CSS3 transition属性

1).transition-property属性

-检索或设置对象中的参与过渡的属性。

【语法】

transition-property:none|all|property;

【参数说明】
-none（没有属性改变）
-all（所有属性改变），默认值
-property（元素属性名）

【例如】
颜色：transition-property:color;
从绿色到红色

透明度：transition-property:opacity
从0%到100%

transform案例

transform.gif

【备注】如果不写transition-property属性，表示all所有属性支持过渡。

2).transition-duration属性

-检索或设置对象过渡的持续时间

【语法】

transiton-duration:time;

【参数说明】
-规定完成过渡效果需要花费的时间（以秒或毫秒计）
-默认值是0

3).transition-timing-function属性

-检索或设置对象中过渡的动画类型。

【语法】

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps([, [ start | end ] ]?) |
cubic-bezier(, , , );

【备注】
一次只能使用一个属性值

【参数说明】

• 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([,[start|end]]?):接受两个参数的步进函数
  第一个参数：必须为正整数，指定函数的步数
  第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
  第二个参数：可选，默认值为end

【参数说明】
-cubic-bezier(,,,):
特定的贝塞尔曲线类型，4个数值需在[0,1]区间内

duration、timing-function综合效果

运动过程持续duration2秒，timing-function-set-in-out效果

transform，duration,timing-ease-in-out.gif

4).transition-delay属性

-检索或设置对象延迟过渡的时间

【语法】

transition-delay:time;

【参数说明】
-指定秒或毫秒数之前要等待切换效果开始
-默认值为0

·##transition属性
-符合属性，检索或设置对象变幻时的过渡

【语法】

transition:property duration timing-function delay;

案例：加上delay，延迟一秒后开始

transform四大属性.gif

【备注】区别“duration”与“delay”两个时间

duration是整个过程所用的时间，
delay是开始之前等待的时候，
虽然delay一般写在后面，但是执行时先执行。

三、transition简写

transition属性

-复合属性，检索或设置对象变换时的过渡

【语法】

transition:property duration timing-function delay;

例如前例的简写：