關於CSS3使用transition屬性實現過渡效果

CSS3中新增的transform屬性，可以實現元素在變換過程中的過渡效果，實現了基本的動畫。以下透過本文為大家介紹CSS3使用transition屬性實現過渡效果，需要的朋友參考下本文

#屬性詳解

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

• transition-property：設定應用程式過渡的CSS屬性，如background。

• transition-duration：設定過渡效果所花費的時間。預設是 0。

• transition-timing-function：設定過渡效果的時間曲線。預設是 "ease"。

• transition-delay：規定過渡效果何時開始。預設是 0。

範例：

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

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

transition-property和transition-duration

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

• width

• 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屬性用來設定指定屬性的過渡效果花費時間，可以是秒（s）或毫秒（ms）。
transition-delay和transition-timing-function
#transition-delay用來設定過渡效果開始的時間，預設為0，可以是秒（s）或毫秒（ms）。如果transition-delay是負數，表示過渡效果提前開始。

• transition-timing-function用來設定過渡的效果，這些效果包括：

• ease - 開始慢，中間快，結束慢

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

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

ease-in-out - 開始緩慢和結束慢

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

範例：

 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 屬性。

觸發

要注意的是，過渡效果是需要之前已經定義好了屬性，過渡效果透過觸發來應用，例如: hover, :focus, and :active等。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何使用CSS3實作千變萬化的文字陰影text-shadow的效果############CSS3的animation實作簡易幻燈片輪播特效#####################

以上是關於CSS3使用transition屬性實現過渡效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！