這篇文章主要介紹“CSS3過渡是怎么工作的”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3過渡是怎么工作的”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為策勒企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都網(wǎng)站建設，策勒網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

    CSS3過渡

    CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候，無需使用Flash動畫或JavaScript。

    它是如何工作？

    CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

    要實現(xiàn)這一點，必須規(guī)定兩項內(nèi)容：

    指定要添加效果的CSS屬性

    指定效果的持續(xù)時間。

    實例

    應用于寬度屬性的過渡效果，時長為2秒：

div

{

    transition: width 2s;

    -webkit-transition: width 2s; /* Safari */

}

    注意：如果未指定的期限，transition將沒有任何效果，因為默認值是0。

    指定的CSS屬性的值更改時效果會發(fā)生變化。一個典型CSS屬性的變化是用戶鼠標放在一個元素上時：

    實例

    規(guī)定當鼠標指針懸浮(:hover)于