第13章-CSS-3-0動畫效果

13.1CSS3.0實現(xiàn)元素變換效果在網(wǎng)頁中如果需要使一些元素產(chǎn)生傾斜等變換效果，則需要通過將圖像制作成傾斜的效果來實現(xiàn)，而在CSS3.0中，新增了transform屬性，通過該屬性的設(shè)置可以使網(wǎng)頁中的元素產(chǎn)生各種變換效果。

transform屬性CSS3.0新增的transform屬性可以在網(wǎng)頁中實現(xiàn)元素的旋轉(zhuǎn)、縮放、移動、傾斜等變換效果。transform屬性的語法如下。transform:none|<transform-function>;旋轉(zhuǎn)變形設(shè)置transform屬性值為rotate()函數(shù)，即可實現(xiàn)網(wǎng)頁元素的旋轉(zhuǎn)變換。rotate()函數(shù)用于定義網(wǎng)頁元素在二維空間中的旋轉(zhuǎn)變換效果。rotate()函數(shù)的語法如下。transform:rotate(<angle>);實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素旋轉(zhuǎn)最終文件：光盤\最終文件\第13章\13-1-2.html視頻：光盤\視頻\第13章\13-1-2.swf縮放和翻轉(zhuǎn)變形設(shè)置transform屬性值為scale()函數(shù)，即可實現(xiàn)網(wǎng)頁元素的縮放和翻轉(zhuǎn)效果。scale()函數(shù)用于定義網(wǎng)頁元素在二維空間的縮放和翻轉(zhuǎn)效果。scale()函數(shù)的語法如下。transform:scale(<x>,<y>);實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素的縮放和翻轉(zhuǎn)移動變形設(shè)置transform屬性值為translate()函數(shù)，即可實現(xiàn)網(wǎng)頁元素的移動。translate()函數(shù)用于定義網(wǎng)頁元素在二維空間的偏移效果。translate()函數(shù)的語法如下。transform:translate(<x>,<y>);實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素的移動最終文件：光盤\最終文件\第13章\13-1-3.html視頻：光盤\視頻\第13章\13-1-3.swf最終文件：光盤\最終文件\第13章\13-1-4.html視頻：光盤\視頻\第13章\13-1-4.swf傾斜變形設(shè)置transform屬性值為skew()函數(shù)，即可實現(xiàn)網(wǎng)頁元素的傾斜效果。skew()函數(shù)用于定義網(wǎng)頁元素在二維空間中的傾斜變換，skew()函數(shù)的語法如下。transform:skew(<angleX>,<angleY>);實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素的傾斜效果13.1.6矩陣變形設(shè)置transform屬性值為matrix()函數(shù)，即可實現(xiàn)網(wǎng)頁元素的矩陣變形。matrix()函數(shù)用于定義網(wǎng)頁元素在二維空間的矩陣變形效果，matrix()函數(shù)的語法如下。transform:matrix(<m11>,<m12>,<m21>,<m22>,<x>,<y>);實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素的矩陣變形效果最終文件：光盤\最終文件\第13章\13-1-5.html視頻：光盤\視頻\第13章\13-1-5.swf最終文件：光盤\最終文件\第13章\13-1-6.html視頻：光盤\視頻\第13章\13-1-6.swf定義變形中心點

transform屬性可以實現(xiàn)對網(wǎng)頁元素的變換，默認的變換原點是元素對象的中心點。在CSS3.0中新增了transform-origin屬性，通過該屬性可以設(shè)置元素變換的中心點位置。transform-origin:<x-axis><y-axis>;實戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素的變形中心點同時使用多個變形函數(shù)矩陣變形雖然非常靈活，但是并不容易理解，也不是很直觀。transform屬性允許同時設(shè)置多個變形函數(shù)，這使得元素變形可以更加的靈活。在為transform屬性設(shè)置多個函數(shù)時，各函數(shù)之間使用空格進行分隔。transform:rotate(<angle>)scale(<x>,<y>)translate(<x>,<y>)skew(<angleX>,<angleY>)matrix(<m11>,<m12>,<m21>,<m22>,<x>,<y>);實戰(zhàn)練習(xí)——為網(wǎng)頁元素同時應(yīng)用多個變形效果最終文件：光盤\最終文件\第13章\13-1-7.html視頻：光盤\視頻\第13章\13-1-7.swf最終文件：光盤\最終文件\第13章\13-1-8.html視頻：光盤\視頻\第13章\13-1-8.swf

13.2CSS3.0實現(xiàn)元素過渡效果在上一節(jié)中所介紹的transform屬性所實現(xiàn)的是網(wǎng)頁元素的變換效果，僅僅呈現(xiàn)的是元素變換的結(jié)果。在CSS3.0中還新增了transition屬性，通過該屬性可以設(shè)置元素的變換過渡效果，可以讓元素的變換過程看起來更加平滑。

transition屬性CSS3.0新增了transition屬性，通過該屬性可以實現(xiàn)網(wǎng)頁元素變換過程中的過渡效果，即在網(wǎng)頁中實現(xiàn)了基本的動畫效果。transition:transition-property||transition-duration||transition-timing-function||transition-delay;

transition-property屬性——實現(xiàn)過渡效果transition-property屬性用于設(shè)置元素的動畫過渡效果，該屬性的語法如下。transition-property:none|all|<property>;實戰(zhàn)練習(xí)——實現(xiàn)網(wǎng)頁元素變形過渡效果最終文件：光盤\最終文件\第13章\13-2-2.html視頻：光盤\視頻\第13章\13-2-2.swf

transition-duration屬性——設(shè)置過渡時間

transition-duration屬性用于設(shè)置動畫過渡過程中需要的時間，該屬性的語法如下。transition-duration:<time>;實戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素變形過渡時間

transition-delay屬性——設(shè)置過渡延遲效果ransition-delay屬性用于設(shè)置動畫過渡的延遲時間，該屬性的語法如下。transition-delay:<time>;實戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素變形過渡延遲時間最終文件：光盤\最終文件\第13章\13-2-3.html視頻：光盤\視頻\第13章\13-2-3.swf最終文件：光盤\最終文件\第13章\13-2-4.html視頻：光盤\視頻\第13章\13-2-4.swf

transition-timing-function屬性——設(shè)置過渡方式transition-timing-function屬性用于設(shè)置動畫過渡的速度曲線，即過渡方式。該屬性的語法如下。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);實戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素變形過渡方式制作動態(tài)選項卡在前面學(xué)習(xí)了CSS3.0的變換屬性transform和過渡屬性transition，通過將這兩種屬性相結(jié)合，在網(wǎng)頁中能夠輕松的實現(xiàn)元素變換過渡的動畫效果，從而有效地增加網(wǎng)頁的交互性。本節(jié)將帶領(lǐng)讀者完成一個動態(tài)選項卡效果的制作，注意學(xué)習(xí)transform屬性和transition屬性的結(jié)合使用。實戰(zhàn)練習(xí)——制作動態(tài)選項卡最終文件：光盤\最終文件\第13章\13-2-5.html視頻：光盤\視頻\第13章\13-2-5.swf最終文件：光盤\最終文件\第13章\13-2-6.html視頻：光盤\視頻\第13章\13-2-6.swf

13.3

CSS3.0實現(xiàn)元素動畫效果在前兩節(jié)中介紹的元素變換和過渡效果是使用CSS樣式制作動畫效果的基礎(chǔ)，但還不是真正的動畫。本節(jié)將介紹完整的CSS3.0動畫效果實現(xiàn)方法，不但可以創(chuàng)建動畫關(guān)鍵幀，還可以對關(guān)鍵幀動畫設(shè)置播放時間、播放次數(shù)、播放方向等，實現(xiàn)更加復(fù)雜、更加靈活的網(wǎng)頁動畫效果。

@keyframes規(guī)則——關(guān)鍵幀動畫CSS樣式所實現(xiàn)的動畫效果，是通過從一種樣式逐步轉(zhuǎn)變到另一種樣式來創(chuàng)建的。@keyframes規(guī)則的語法如下。@keyframes<animationname>{<keyframes-selector>{<css-styles>}}實戰(zhàn)練習(xí)——制作簡單的關(guān)鍵幀動畫最終文件：光盤\最終文件\第13章\13-3-1.html視頻：光盤\視頻\第13章\13-3-1.swf

animation屬性——實現(xiàn)元素動畫效果在CSS3.0中新增了專門用于實現(xiàn)動畫效果的animation屬性，通過該屬性可以把一個或多個關(guān)鍵幀動畫綁定到元素上，從而實現(xiàn)更加復(fù)雜的動畫效和果。animation:<name><duration><timing-function><delay><iteration-count><direction>;實戰(zhàn)練習(xí)——為元素綁定多個關(guān)鍵幀動畫制作交互導(dǎo)航菜單動畫效果CSS3.0中新增的用于創(chuàng)建關(guān)鍵幀動畫的@keyframes和animation屬性雖然目前還沒有得到瀏覽器的廣泛支持，但是其所能夠?qū)崿F(xiàn)的動畫效果能夠讓我們領(lǐng)略到CSS3.0的強大功能。在本節(jié)中將綜合使用本章中所介紹的transition屬性、animation屬性和@keyframes規(guī)則制作交互導(dǎo)航菜單效果。實戰(zhàn)練習(xí)——制作交互導(dǎo)航菜單動畫效果最終文件：光盤\最終文件\第13章\13-3-2.html視頻：光盤\視頻\第13章