IT兄弟連 HTML5教程 CSS3屬性特效 transition過渡

 

CSS3的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。

transition屬性是一個簡寫屬性，用於設置四個過渡屬性，這四個過渡屬性的描述如表1-21：

表1-21  transition過渡屬性及描述

 

   

transition最簡單的用法

下面，咱們爲一個div設置初始寬度爲200px，背景顏色爲「red」色並增長「transition: 2s」。當鼠標移入到這個div後，div通過2s後寬度增長到400px，背景顏色變成「pink」色。2s的過渡時間，咱們能夠見證div的總體變化，代碼以下：

 

將這段代碼運行到瀏覽器中，咱們能夠一覽div的過渡效果。圖7-62是筆者爲div過渡初期、中期和後期隨機截取的三張圖，以供讀者參考：

 

另外，transition還能夠指定須要過渡的屬性，如咱們只須要過渡上例div的寬度屬性時，只須要將transition屬性的值設爲「2s width」。這是，當咱們將鼠標移入到這個元素時，div背景顏色立馬變爲了「pink」色，而寬度變化是有過渡的。

咱們還能夠設置transition的運動樣式、延遲時間及運動形式，讀者感興趣能夠一一嘗試設置運行。