這篇文章主要為大家展示了“css3中新增的transition屬性是什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css3中新增的transition屬性是什么”這篇文章吧。

創(chuàng)新互聯(lián)主營(yíng)班瑪網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,班瑪h5小程序設(shè)計(jì)搭建,班瑪網(wǎng)站營(yíng)銷推廣歡迎班瑪?shù)鹊貐^(qū)企業(yè)咨詢

在CSS3中新增加了一個(gè)新的模塊transition，它可以通過一些簡(jiǎn)單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。

它是一個(gè)復(fù)合屬性，主要包括以下幾個(gè)子屬性。

transition-property:指定過渡或動(dòng)態(tài)模擬的CSS屬性

transition-duration:指定完成過渡所需的時(shí)間

transition-timing-function:指定過渡函數(shù)

transition-delay:指定開始出現(xiàn)的延遲時(shí)間

如：

transition:background-color.5sease.1s;

特別注意：當(dāng)“transition-property”屬性設(shè)置為all時(shí)，表示的是所有中點(diǎn)值的屬性。

示例：

width:200px;

height:200px;

background:red;

margin:20pxauto;

-webkit-transition-property:width;

transition-property:width;

-webkit-transition-duration:.5s;

transition-duration:.5s;

-webkit-transition-timing-function:ease-in;

transition-timing-function:ease-in;

-webkit-transition-delay:.18s;

transition-delay:.18s;

也可以對(duì)屬性進(jìn)行單個(gè)設(shè)置。

以上是“css3中新增的transition屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！