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/
优质内容筛选与推荐>>1、互斥锁，信号量和条件变量的实现
2、-_-#【XSS】
3、新建ftp快捷方式
4、Linux命令学习笔记2
5、DRF之频率组件