css过渡transition

定义

　　过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个紫属性。通过这四个子属性的配合来完成一个完整的过渡效果。

　　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-前缀；而其余高版本浏览器支持标准写法

       <style>
            .test{
                width:100px;
                height:100px;
                background:pink;
                transition-duration:3s;/*过渡持续时间*/
                transition-property:all;/*过渡属性*/
                transition-timing-function:ease;/*过渡函数*/
                transition-delay:0s;/*过渡延迟时间*/
            }
            .test:hover{
                width:500px;
            }
        </style>
        <div class="test"></div>

//鼠标移动到元素上，会出现宽度变化效果

复合属性

　　过渡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属性支持多值)；而空格隔开的代表不同属性的四个关于过渡的子属性

参考文章：http://www.cnblogs.com/xiaohuochai/p/5347930.html