定義

　　過(guò)渡transition是一個(gè)復(fù)合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個(gè)紫屬性。通過(guò)這四個(gè)子屬性的配合來(lái)完成一個(gè)完整的過(guò)渡效果。

　　transition-property:過(guò)渡屬性（默認(rèn)值為all）

　　transition-duration:過(guò)渡持續(xù)時(shí)間（默認(rèn)值為0s）

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

　　transition-delay:過(guò)渡延遲時(shí)間（默認(rèn)值為0s）

　　[注意]IE9-不支持該屬性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴；而其余高版本瀏覽器支持標(biāo)準(zhǔn)寫(xiě)法

<style>.test{width:100px;height:100px;background:pink;transition-duration:3s;/*過(guò)渡持續(xù)時(shí)間*/transition-property:all;/*過(guò)渡屬性*/transition-timing-function:ease;/*過(guò)渡函數(shù)*/transition-delay:0s;/*過(guò)渡延遲時(shí)間*/}.test:hover{width:500px;}</style> <div class="test"></div>

//鼠標(biāo)移動(dòng)到元素上，會(huì)出現(xiàn)寬度變化效果

復(fù)合屬性

　　過(guò)渡transition的這四個(gè)子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時(shí)間。當(dāng)兩個(gè)時(shí)間同時(shí)出現(xiàn)時(shí)，第一個(gè)是<transition-duration>，第二個(gè)是<transition-delay>，當(dāng)只有一個(gè)時(shí)間時(shí)，它是<transition-duration>，而<transition-delay>為默認(rèn)值0

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

　　[注意]transition的這四個(gè)子屬性之間不能用逗號(hào)隔開(kāi)，只能用空格隔開(kāi)。因?yàn)槎禾?hào)隔開(kāi)的代表不同的屬性(transition屬性支持多值)；而空格隔開(kāi)的代表不同屬性的四個(gè)關(guān)于過(guò)渡的子屬性

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

轉(zhuǎn)載于:https://www.cnblogs.com/rachelch/p/7515828.html

總結(jié)

以上是生活随笔為你收集整理的css过渡transition的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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