Transition的過渡是什么

今天就跟大家聊聊有關(guān)Transition的過渡是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

　　通過過渡transition，可以讓web前端開發(fā)人員不需要javascript就可以實(shí)現(xiàn)簡單的動(dòng)畫交互效果。過渡屬性看似簡單，但實(shí)際上它有很多需要注意的細(xì)節(jié)和容易混淆的地方。本文將介紹和梳理關(guān)于CSS過渡的知識(shí)

　　transition定義

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

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

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

　　transiton-timing-function:過渡函數(shù)(默認(rèn)值為ease函數(shù))

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

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

　　transition代碼

　　.test{

　　height:100px;

　　width:100px;

　　background-color:pink;

　　transition-duration:3s;

　　/*以下三值為默認(rèn)值，稍后會(huì)詳細(xì)介紹*/

　　transition-property:all;

　　transition-timing-function:ease;

　　transition-delay:0s;

　　}

　　.test:hover{

　　width:500px;

　　}

　　復(fù)制代碼

　　<divclass="test"></div>

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

看完上述內(nèi)容，你們對Transition的過渡是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。