定義

　　過渡transition是一個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個紫屬性。通過這四個子屬性的配合來完成一個完整的過渡效果。

　　transition-property:過渡屬性（默認值為all）

　　transition-duration:過渡持續(xù)時間（默認值為0s）

　　transition-timing-function:過渡函數(shù)（默認值為ease函數(shù)）

　　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;/*過渡持續(xù)時間*/transition-property:all;/*過渡屬性*/transition-timing-function:ease;/*過渡函數(shù)*/transition-delay:0s;/*過渡延遲時間*/}.test:hover{width:500px;}</style> <div class="test"></div>

//鼠標移動到元素上，會出現(xiàn)寬度變化效果

復合屬性

　　過渡transition的這四個子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當兩個時間同時出現(xiàn)時，第一個是<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

轉載于:https://www.cnblogs.com/rachelch/p/7515828.html

總結

以上是生活随笔為你收集整理的css过渡transition的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。