一、transition：过渡效果
它有4个属性：
transition-property ：过度属性（默认值为all）
transition-duration ：过度持续时间（默认值为0s）
transition-timing-function：转速曲线,过度函数（默认值为ease函数）
transition-delay：过度延迟时间（默认值为0s）
注意:IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法
.test{ height: 100px; width: 100px; background-color: pink; transition-duration: 3s; /* 以下三值为默认值，稍后会详细介绍 */ transition-property: all; transition-timing-function: ease; transition-delay: 0s; } .test:hover{ width: 500px; }
<div class="test"></div>
鼠标移动到元素上，会出现宽度变化效果
复合属性:
过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0
其中，<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>
当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0
注意:transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值)；而空格隔开的代表不同属性的四个关于过渡的子属性
.test{ height: 100px; width: 100px; background-color: pink; /*代表持续时间为2s，延迟时间为默认值0s*/ transition；2s; } .test:hover{ width: 500px; }
下面详细说明transition的四个属性
1.transition-property 过度属性
值：none | all | <transition-property>[,<transition-property>]*
none: 没有指定任何样式
all: 默认值，表示指定元素所有支持transition-property属性的样式
<transition-property>: 可过渡的样式，可用逗号分开写多个样式
可过渡的属性：
不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
2.transition-duration------过渡持续时间
该属性的单位是秒s或毫秒ms
该属性不能为负值
若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
类似于：transition:width 1s ease 0s, background 4s ease 0s ---多个属性的过渡
3.transition-delay------过渡延迟时间
该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms
该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。
若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果
若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
类似于：transition:width 3s ease 1s, background-color 3s ease 4s
4.transition-timing-function-----过渡时间函数
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果
ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)
关键字其实是bezier函数或steps函数的特殊值
二、过渡阶段：
1.过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间
2.过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值
3.过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值
4.以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准
.test{ width: 100px; transition: 3s; } .test:hover{ width: 500px; transition: 500ms; }
5.如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值
.box:hover{ font-size: 50px; } .test:hover{ font-size: 30px; }
<div class="box"> <div class="test">test</div> </div>
6.若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值
.test{ width: 100px; -webkit-transition: width 2s; transition:width 2s; } .test:hover{ width:auto; }
注意---低版本webkit内核浏览器存在bug，会产生反向的过渡效果
7.隐式过渡
是指一个属性改变时引起另一个属性的改变。如border-width是1em，则font-size改变时，border-width也会相应的改变。firefox和IE浏览器支持隐式过渡。而webkit内核浏览器不支持隐式过渡。
.test{ border: 1px solid black; -webkit-transition: font-size 2s; transition:font-size 2s; font: 20px/100px "宋体"; } .test:hover{ font-size: 40px; border-right-width: 1em; }
三、触发方式
一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等
四、局限性
transition需要事件触发，所以没法在网页加载时自动发生
transition是一次性的，不能重复发生，除非一再触发
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态
一条transition规则，只能定义一个属性的变化，不能涉及多个属性