transition属性——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-