怎么在CSS3中利用transition屬性實現(xiàn)過渡效果？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供嶧城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、成都做網(wǎng)站、H5網(wǎng)站設(shè)計、小程序制作等業(yè)務(wù)。10年已為嶧城眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

屬性詳解

transition屬性目的是讓css的一些屬性（如background）的以平滑過渡的效果出現(xiàn)。它是一個合并屬性，是由以下四個屬性組合而成：

• transition-property：設(shè)置應(yīng)用過渡的CSS屬性，如background。

• transition-duration：設(shè)置過渡效果花費的時間。默認(rèn)是 0。

• transition-timing-function：設(shè)置過渡效果的時間曲線。默認(rèn)是 "ease"。

• transition-delay：規(guī)定過渡效果何時開始。默認(rèn)是 0。

示例：

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

定義transition屬性時，transition-property和transition-duration是必選，其他兩個為可選。

transition-property和transition-duration

transition-property用來指定應(yīng)用過渡效果的CSS屬性，這些屬性包括（可能不全）：

• width

• height

• color

• background (color, image, position)

• transform (in the next post)

• border (color, width)

• position (top, bottom, left, right )

• text (size, weight, shadow, word-spacing)

• margin

• padding

• opacity

• visibility

• z-index

• all

transition-duration屬性用來設(shè)置指定屬性的過渡效果花費時間，可以是秒（s）或者毫秒（ms）。

transition-delay和transition-timing-function

transition-delay用來設(shè)置過渡效果開始的時間，默認(rèn)為0，可以是秒（s）或者毫秒（ms）。如果transition-delay是負數(shù)，表示過渡效果提前開始。

transition-timing-function用來設(shè)置過渡的效果，這些效果包括：

• ease - 開始慢，中間快，結(jié)束慢

• ease-in - 漸入效果，慢入快出

• ease-out - 漸出效果，快入慢出.

• ease-in-out - 開始慢和結(jié)束慢

• cubic-bezier(n,n,n,n) - 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值

示例：

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

多屬性

對于多個屬性，各個屬性的效果以逗號隔開：

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。

Safari 支持替代的 -webkit-transition 屬性。

Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

觸發(fā)

需要注意的是，過渡效果是需要之前已經(jīng)定義好了屬性，過渡效果通過觸發(fā)來應(yīng)用，比如:hover, :focus, and :active等。

關(guān)于怎么在CSS3中利用transition屬性實現(xiàn)過渡效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

文章標(biāo)題：怎么在CSS3中利用transition屬性實現(xiàn)過渡效果
文章網(wǎng)址：http://www.chinadenli.net/article38/ieopsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、響應(yīng)式網(wǎng)站、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、用戶體驗、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)