css3过渡元素

1、什么是过渡
　　元素从一个【状态】到另外一个【状态】的【平滑变换】【过程】
2、过渡属性
　　transition
3、过渡4要素(子属性)
　　（1）、过渡属性
　　元素的哪个【状态】发生变化时要使用过渡的效果
　　当指定的属性发生改变时，就会触发过渡效果
　　语法：
　　transition-property:none | all | property
　　transition-property:background;
　　（2）、过渡时间
　　整个过渡效果在多长时间内完成，以 秒(s)或毫秒(ms)为单位
　　语法：
　　transition-duration: s|ms;
　　transition-duration:1s;
　　注意：
　　过渡时间默认为 0 ，如果为0时，则没有过渡的效果产生。
　　如果想看到过渡效果，则必须设置该属性。
　　（3）、过渡函数
　　指定时间内(transition-duration)过渡的速度效果。
　　语法：
　　transition-timing-function
　　取值：
　　ease : 默认值，慢速开始，速度变快，慢速结束
　　linear:匀速开始到结束
　　ease-in:慢速开始，加速效果(由慢到快)
　　ease-out:慢速结束，减速效果(由快到慢)
　　ease-in-out:以慢速开始和结束，先加速再减速
　　（4）、过渡延迟
　　当过渡操作被激发后，等待多长时间后才开始执行效果
　　语法：transition-delay
　　以秒或毫秒作为单位
　　4、统一设置过渡效果
　　属性：
　　transition:
　　　　用于设置四个过渡子属性
　　transition:transition-property transition-duration transition-timing-function transition-delay;
　　transition:width 2s linear 0s;

　　transition:prop dura timing delay;
　　5、触发过渡
　　过渡效果由用户的行为进行触发(点击、鼠标悬停)
　　6、多个过渡效果
　　transition-property:prop1,prop2;
　　transition-duration:t1,t2;
　　transition-timing-function:fun1,fun2;
　　transition-delay:delay1,delay2;

　　实例

　　效果如下，当鼠标移到div上时div发生改变

　　

<div class="square"> </div> 

　　样式

　　

　　想要了解更多的css3特性可以去W3C School网站链接http://www.runoob.com/