深入理解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

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- 1000px){
    .test{
         500px;
    }
}

　　　　点击事件

　　　　用户点击元素时触发

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}