32.CSS3过渡效果
第二十五章 CSS3过渡效果
一、过渡简介
过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：hover、：focus、：active、：checked等，CSS3提供了transition属性来实现这个过渡的，主要属性如下
属性 说明
transition-property 指定过渡或动态模拟的CSS属性
transition-duration 制定完成过渡所需的时间
transition-timing-function 制定过渡的函数
transition-delay 指定过渡开始出现的延迟时间
transition 简写形式，按照上面四个属性连写
二、transition-property
首先，设置过渡的第一个属性就是指定的过渡属性。transition-property详细属性如下
（1）none: 没有指定任何样式
（2）all : 默认值，指定元素所支持transition-property属性的样式
（3）指定样式： 指定支持transition-property的样式
//从上面看出，none用于本身有过渡样式从而取消。而all支持所有transition-property样式，还有一种是指定transition-property中的某些样式。
transition-property支持的样式有：
样式名称 样式类型
background-color color（颜色）
background-image only gradients（渐变）
background-position percentage,length(百分百，长度值)
border-bottom-color color
border-bottom-width length
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length,percentage
color color
crop rectangle
font-size length,percentage
·
·
·
三、transition-duration
如果单独的设置样式，还不能够立刻实现效果，必须加上过渡所需的时间，因为默认情况下，过渡时间为0.
//设置过渡时间为1秒，如果是半秒钟可以设为.5s
transition-duration:1s;
四、transition-timing-function
当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢，即ease也是默认值，其他几种缓动方式如下：
（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，1.0，1.0）
（4）ease-out ： 。。。。速度越来越慢，贝塞尔曲线（0,0,0.58,1.0）
（5）ease-in-out ：。。。先加速，后减速。贝塞尔曲线（0.42,0,0.58,1.0）
//恒定速度 transition-timing-function:linear;
//贝塞尔曲线 transition-timing-function:cubic-bezier(0.25,0.65,0.88,0.25)
五、transition-delay 设置一个延迟效果，就是设置延迟后时间后在执行效果。如果有多个样式效果，可以设置多个延迟时间，以空格隔开：
transition-delay：0s,1s,0s;
六、简写和版本
可以使用transition来简写，有两种形式的简写
（1）单独声明
transition：background-color 1s ease 0s,color 1s ease 0s,margin-left 1s ease 0s;
//如果都是统一的，直接使用all
transition ：all is ease 0s;
Opera Firefox Chrome Safari IE
支持需带前缀 15～22 5～15 4～25 3.1～6 无
支持不带前缀 23+ 16+ 26+ 6.1+ 10.0+
//兼容完整版（省略）
