CSS的transition過渡屬性是什么

這篇文章主要介紹CSS的transition過渡屬性是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　transition屬性是在表現時間經過的變化時使用，具體來說，你可以通過點擊光標逐漸更改背景顏色等，還有其他的animation屬性，但過渡屬性用于進行相對簡單的變化時使用。

　　下面我們就來具體看看transition屬性的用法

　　我們先來看看transition屬性的參數

　　-webkit-transition-property:變化的屬性(background屬性等);

　　-webkit-transition-duration:變化的秒數;

　　-webkit-transition-timing-function:變化的方法;

　　-webkit-transition-timing-function的有以下的值

　　default

　　linear:勻速

　　ease-in:逐漸加速

　　ease-out:逐漸減速

　　ease-in-out:逐漸加速和逐漸加速

　　cubic-bezier:自定義

　　也可以使用以下的縮寫

　　-webkit-transition:變化的屬性変化的秒數変化的方法;

　　我們來看具體的示例

　　代碼如下

　　HTML代碼

　　<divid="demo"></div>

　　<br>

　　<divid="demo2"></div>

　　CSS代碼

　　#demo{

　　height:100px;

　　width:200px;

　　background:rgb(255,100,100);

　　-webkit-transition-property:background;

　　-webkit-transition-duration:1s;

　　-webkit-transition-timing-function:linear;

　　}

　　#demo:hover{

　　background:rgb(100,255,100);

　　}

　　#demo2{

　　height:100px;

　　width:200px;

　　background:rgb(255,100,100);

　　-webkit-transition:background2sease-in-out;

　　}

　　#demo2:hover{

　　background:rgb(100,100,255);

　　}

以上是“CSS的transition過渡屬性是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！