过渡阶段

• 过渡开始时间=样式改变的时刻+过渡延迟时间；
• 过渡结束时间=过渡开始时间+过渡持续时间

---

• 过渡起始值=过渡前的过渡属性值；
• 过渡结束值=过渡完成后的过渡属性值；

过渡分为两个阶段：前进（ forward）和反向（ reverse ）。

若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值。

• 以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}

• 如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}

<div class="box">
    <div class="test">test</div>
</div>

• 若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值

[注意] 低版本webkit内核浏览器存在bug，会产生反向的过渡效果

.test{
    width: 100px;
    -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}

• 隐式过渡是指一个属性改变时引起另一个属性的改变。如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;
}