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-六、IOS3.2-6.一、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