第3部分動畫
245使用transition屬性平滑地旋轉圖像
此實例主要在CSS樣式中設置元素的transition屬性，從而使圖像在指定的時間內旋轉指定的角度。當在Google Chrome瀏覽器中顯示該頁面時，圖像在0°時狀態如圖2451所示； 當鼠標指針懸浮在圖像上時，則圖像將在5秒內以線性過渡的方式從0°旋轉到270°，如圖2452所示。有關此實例的主要代碼如下。
圖2451
圖2452
上面有底紋的代碼是此實例的核心代碼。在該部分代碼中，transition: transform 5s linear用於設置圖像在5秒內以線性過渡方式執行transform所定義的操作(此實例是旋轉270°)。CSS3的transition允許屬性值在一定的時間內平滑地過渡，這種效果可以在鼠標單擊、獲得焦點、被單擊或對元素的任何改變中觸發，並平滑地以動畫效果改變屬性值。transition的語法格式如下。
transition: ［<'transition-property'> || <'transition-duration'>
|| <'transition-timing-function'> || <'transition-delay'>
［, ［<'transition-property'> || <'transition-duration'> ||
<'transition-timing-function'> || <'transition-delay'>］］*
從以上可以看出，transition主要包含4個屬性值，即transitionproperty(執行變換的屬性)、 transitionduration(變換延續的時間)、transitiontimingfunction(在延續時間段變換的速率變化)、transitiondelay(變換延遲時間)。
transitionproperty屬性值用來指定當元素的一個屬性改變時執行transition效果，主要的值為none(沒有屬性改變)、all(所有屬性改變，這也是其默認值)、ident(元素屬性名)。當ident值為none時，transition馬上停止執行； 當ident值指定為all時，則元素的任何屬性值產生變化時都將執行transition效果，ident是可以指定的元素的某一個屬性值。ident對應的類型如下。
(1) color： 通過紅、綠、藍和透明度組件變換，例如bordercolor、backgroundcolor、 color、outlinecolor等屬性。
(2) length： 真實的數字，例如wordspacing、width、verticalalign、top、right、bottom、left、padding、outlinewidth、margin、minwidth、minheight、maxwidth、maxheight、lineheight、height、borderwidth、borderspacing、backgroundposition等屬性。
(3) percentage： 真實的數字，例如wordspacing、width、verticalalign、top、right、bottom、left、minwidth、minheight、maxwidth、maxheight、lineheight、height、backgroundposition等屬性。
(4) integer： 離散步驟(整個數字)，在真實的數字空間以及使用floor()轉換為整數時發生，例如outlineoffset、zindex等屬性。
(5) number： (浮點型)數值，例如zoom、opacity、fontweight等屬性。
(6) transform list： 對元素進行旋轉、縮放、移動或傾斜等。
(7) rectangle： 通過x、y、width和height(轉為數值)變換，例如crop。
(8) visibility： 離散步驟，在0到1數字範圍之內，0表示隱藏，1表示**顯示，例如visibility。
(9) shadow： 作用於color、x、y和blur(模糊)屬性，例如textshadow。
(10) gradient： 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或者線性的)和相同的停止數值，以便執行動畫，例如backgroundimage。
(11) paint server(SVG)： 隻支持從gradient到gradient以及從color到color，之後的工作與上面類似。
(12) spaceseparated list of above： 如果列表有相同的項目數值，則列表中的每一項按照上面的規則進行變化，否則無變化。
(13) a shorthand property： 如果縮寫的所有部分都可以實現動畫，則像所有單個屬性變化一樣變化。
transitionduration屬性值用來指定元素轉換過程的持續時間，取值
![](\"img/B065.jpg\"/)