css3过渡效果

transition 实现过渡效果：通过一些简单的css动作触发平滑过渡功能

任何用户动作，都可以触发元素的过渡效果，例如伪类动作:hover、:focus、:active、:checked；

例如点击事件等只要使元素（如图片）的样式发生改变，都可以触发该元素的过渡效果。

包含属性如下：

一、transition-property 指定过渡或动态模拟的css属性

属性值如下所示：

1、none 没有指定任何样式

2、all 默认值，指定该元素符合过渡规范的所有样式

3、指定样式 指定你要修改的、符合过渡规范的样式支持多个值，可以用逗号连接。

eg. div{

transition-property:margin,background-color,border;

}

二、transition-duration 指定完成过渡所需的时间

设置具体的时间，默认值为0，如果半秒钟可以设置为.5s

eg. div{

transition-property:margin,background-color,border;

transition-duration:1s;

}

三、transition-timing-function 指定过渡效果运行时，产生的过渡效果

属性值如下所示：

1、ease 默认值，元素样式从初始状态过渡到结束状态时，速度由快到慢，逐渐变慢，

等同于贝赛尔曲线（0.25,0.1,0.25,1.0）

2、linear 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝赛尔曲线

（0.0,0.0,1.0,1.0）

3、ease-in 元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等

同于贝赛尔曲线（0.42,0.0,1.0,1.0）

4、ease-out 元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等

同于贝赛尔曲线（0.0,0.0,0.58,1.0）

5、ease-in-out 元素样式从初始状态过渡到终止样式时，先加速，再减速。等同于贝赛尔曲线

（0.42,0.0,0.58,1.0）

6、自定义属性 使用cubic-bezier(p0,p1,p2,p3)，里面有四个参数,p0和p2值在0~1之间

7、跳跃式过渡 steps(n,type)，第一个值是一个数值，表示跳跃几次,分几步完成，若n值为1，

那么表示该元素没有过渡效果，直接转换样式。第二个值是start或者end（默认），可选值。表

示开始是跳跃，还是结束时跳跃。

eg. div{

transition-timing-function:ease;

transition-timing-function:cubic-bezier(0.0,-0.4,1.0,0.8);

transition-timing-function:steps(5,end);

}

四、transition-delay 效果在设置的延迟时间后再执行

如果有多个样式效果，可以设置多个延迟时间，以空格隔开。

eg. div{

transition-property:margin,background-color,border;

transition-duration:1s;

transition-delay:2s; 一起设置

transition-delay:0s 2s 0s; 分别设置

}

五、transition 简写形式

直接使用transition来简写，有两种形式的简写，如下所示

1、每个样式单独声明；

eg. div{

transition:background-color 1s ease 0s,color 1s ease 0s;

}

2、直接使用all，统一声明

eg. div{

transition:all 1s ease 0s;

}

注意：过渡效果的标准样式要求浏览器的版本过高，建议在标准样式的前面，加上各浏览器带前缀

的过渡样式。

各浏览器前缀如下：

谷歌 -webkit-

火狐 -moz-

Opear -o-

IE -ms-