深入理解CSS过渡transition
过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文记录一下自己的看法和一些收集来的资料。
那就直接开始了~~~
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。
简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
一、在默认样式中声明元素的初始状态样式；
二、声明过渡元素最终状态样式，比如悬浮状态；
三、在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
-
-
transition-property:指定过渡或动态模拟的CSS属性（默认值为all）
-
transition-duration:指定完成过渡所需的时间（默认值为0s）
-
transition-timing-function:指定过渡函数（默认值为ease函数）
-
transition-delay:指定开始出现的延迟时间（默认值为0s）
-
[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法
过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。
其中，<transition-duration>和<transition-delay>都是时间。
当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>；
当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0
1 transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值)；而空格隔开的代表不同属性的四个关于过渡的子属性
<transition-property> 过渡属性
值: none | all | <transition-property>[,<transition-property>]*
初始值: all
应用于: 所有元素
继承性: 无
1.none: 没有指定任何样式all: 默认值，表示指定元素所有支持 2.transition-property属性的样式 3.<transition-property>: 可过渡的样式，可用逗号分开写多个样式
[注意]不是所有的css属性值都可以过度，具有中间值得属性才具备过渡属性。
<transition-duration> 过渡持续时间
值: <time>[,<time>]*
初始值: 0s（单位为s或者ms）
应用于: 所有元素
继承性: 无
[注意]该属性不能为负值
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
<transition-delay> 过渡延迟时间 - 该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms
值: <time>[,<time>]*
初始值: 0s
应用于: 所有元素
继承性: 无
[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果
[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
<transition-timing-function>
值: <timing-function>[,<timing-function>]*
初始值: ease函数(steps函数和bezier函数)
应用于: 所有元素
继承性: 无
steps函数
steps步进函数将过渡时间划分成大小相等的时间时隔来运行
steps步进函数为 - steps(<integer>[,start | end]?)
注：<integer>:用来指定间隔个数(该值只能是正整数) 第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持
关键字
关键字其实是bezier函数或steps函数的特殊值
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)
触发方式
一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等
@media触发
符合媒体查询条件时触发
/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
.test{
width: 500px;
}
}
点击事件
用户点击元素时触发
test.onclick = function(){
test.style.width = '300px';
setTimeout(function(){
test.style.width = '100px';
},3000);
}
