CSS3中的过渡

1.过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

语法:    transition:[transition-property  transition-duration  transition-timing-function   transition-delay ] 

transition-property  ----过渡或动态模拟的CSS属性
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

transition-duration  ----完成过渡所需要的时间
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）

transition-timing-function ----指定过渡函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）

transition-delay ----过渡开始出现的延迟时间
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行

2.过渡的触发机制:
伪类触发
：hover
：active
：focus
：checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发

示例:
/*设置过渡*/
img { 
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transition: all 0.8s ease-in-out; /* Firefox浏览器 */
            -webkit-transition: all 0.8s ease-in-out;   /* Chrome浏览器 */
            -o-transition: all 0.8s ease-in-out;   /* Opera浏览器 */
            transition: all 0.8s ease-in-out;
        }
/*触发过渡 旋转360度并放大1.5倍*/
img:hover {
   /*为防止浏览器兼容性，需要加上前缀*/
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }