CSS3过渡

一、CSS3 过渡（Transition）

-允许css的属性值在一定的时间区间内平滑的过渡

-在鼠标点击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变css的属性值。

 

二、transition-property属性

　　1、介绍

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

　　2、语法

　　　　transition-property:none| all |property;

　　3、参数说明

　　　　none(没有属性改变)

　　　　all(所有属性改变)，默认值

　　　　property（元素属性名）

 

三、transition-duration属性

　　1、介绍

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

　　2、语法

　　　　tuansition-duration:time;

　　3、参数说明

　　　　-规定完成过渡效果需要花费的时间（以秒或毫秒计）

　　　　-默认值是0

　　4、举个栗子

　　　　tuansition-duration:2s;

 

四、transition-timing-function属性

　　1、介绍

　　　　检索或设置对象中过渡的东环类型。

　　2、语法

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

　　3、参数说明

　　　　linear:线性过渡。（整个过程匀速运动）。

　　　　ease:平滑过渡。（结束比较生硬）。

　　　　ease-in:由慢到快。（结束比较生硬）。

　　　　ease-out:由快到慢。

　　　　ease-in-out:由慢到快再到慢。

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

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

　　　　steps(<integer>[,[start | end]] ?):两个接受参数的步进函数。

　　　　　　　　第一个参数：必须为正整数，指定函数

　　　　　　　　第二个参数：取值可是start或end，指定每一步的值发生变化的时间点

　　　　　　　　第二个参数：可选，默认值为end

　　　4、举个栗子：

　　　　transition-timing-function:ease-in-out；

 

五、transition-delay属性

　　1、介绍

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

　　2、语法

　　　　transition-delay:time;

　　3、参数说明

　　　　-指定秒或毫秒数之前要等待切换效果开始

　　　　-默认值为0

　　4、举个栗子

　　　　transition-delay:2s;

 

六、transition简写

　　1、语法

　　　　transition:property duration timing-function delay;

　　2、栗子

　　　　transition:transform 2s ease-in-out 1s;