1、第1頁第16章 設計動畫本章概述 本章的學習目標主要內容第2頁本章概述CSS3中的動畫功能可以用來做出在網頁上運行的動畫。CSS3中的動畫功能主要包括Transitions和Animations，這兩種功能都可以用來制作動畫效果。其中，Transitions功能支持從一個屬性值平滑過渡到另一個屬性值，方便用來制作顏色漸變和形狀漸變動畫；Animations功能支持通過關鍵幀的指定來在頁面上產生更復雜的動畫效果，方便制作逐幀動畫。例如，利用Transitions功能，可以通過改變background-color屬性值來讓背景色從一種顏色平滑過渡到另一種顏色。第3頁本章的學習目標掌握過渡動畫的制作

2、方法，掌握過渡屬性、過渡時間、過渡延遲時間、過渡效果的設置操作。掌握3D動畫制作方法，掌握動畫名稱、動畫時間、動畫播放方式、動畫延遲時間、動畫播放次數以及動畫播放方向的設置操作。掌握漸變效果制作，包括Webkit漸變、Mozilla漸變、Opera漸變和IE漸變。能夠應用CSS3的動畫功能制作具有一定綜合度的動畫效果。第4頁主要內容16.1 過渡動畫16.2 3D動畫 16.3 漸變效果16.4 案例綜合實戰16.5 本章小結 第5頁16.1 過渡動畫16.1.1 定義過渡屬性16.1.2 定義過渡時間16.1.3 定義過渡延遲時間16.1.4 定義過渡效果第6頁16.1.1 定義過渡屬性tr

3、ansition-property屬性用來定義轉換動畫的CSS屬性名稱，如background-color屬性。該屬性的語法格式如下：transition-property ： none | all | , *transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其默認值；indent（元素屬性名）。當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果，ident是可以指定元素的某一個屬性值。第

4、7頁16.1.2 定義過渡時間transition-duration是用來指定元素轉換過程的持續時間，即設置從舊屬性換到新屬性花費的時間，單位為秒。該屬性的語法格式如下：transition-duration ： , * 該屬性的初始值為0，適用于所有元素以及:before和:after偽元素。在默認情況下，動畫過渡時間為0秒，所以當指定元素動畫時，會看不到過渡的過程，直接看到結果。第8頁16.1.3 定義過渡延遲時間transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行transition效果。該屬性的語法格式如下：transition-

5、delay ： , * 該屬性的取值為數值，單位為s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用于所有元素，包括:before和:after偽元素。 默認大小是0，也就是變換立即執行，沒有延遲。第9頁16.1.4 定義過渡效果transition-timing-function的值允許開發人員根據時間的推進去改變屬性值的變換速率，也就是定義過渡動畫的效果，其基本語法格式如下：transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-be

6、zier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* transition-timing-function有6個可能值：ease：過渡效果逐漸變慢。默認值。linear：勻速過渡效果。ease-in：加速過渡效果。ease-out：減速過渡效果。ease-in-out：過渡效果首先是加速，然后減速。cubic-bezier：該值允許自定義一個時間曲線，即特定的cubic-bezier曲線。第10頁主要內容16.1 過渡動畫16.2 3D動畫 16.3 漸變效果16.4 案例

7、綜合實戰16.5 本章小結 第11頁16.2 3D動畫 16.2.1 定義動畫名稱16.2.2 定義動畫時間16.2.3 定義動畫播放方式16.2.4 定義動畫延遲時間16.2.5 定義動畫播放次數16.2.6 定義動畫播放方向16.2.7 控制播放狀態16.2.8 翻轉的圖片第12頁16.2.1 定義動畫名稱animation-name用來定義一個動畫的名稱，基本語法格式如下： animation-name: none | IDENT,none | IDENT*;其中，IDENT是由Keyframes創建的動畫名，換句話說，此處的IDENT要和Keyframes中的IDENT一致，如果不一致

8、，將不能實現任何動畫效果；none為默認值，當值為none時，將沒有任何動畫效果。另外，這個屬性和前面所介紹的transition一樣，可以同時附幾個animation給一個元素，只需要用逗號“，”隔開。第13頁16.2.2 定義動畫時間animation-duration用來指定元素播放動畫所持續的時間長短，基本語法格式如下：animation-duration: ,*其中，為數值，單位為s（秒），其默認值為0。這個屬性和transition中的transition-duration使用方法一樣。第14頁16.2.3 定義動畫播放方式animation-timing-function是指元素

9、根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式，基本語法格式如下：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) , ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )* 和transition中的transition-timing-function一樣，animation-timing-function具有以下6種變換方式：ease、e

10、ase-in、ease-out、ease-in-out、linear和cubic-bezier，使用方法與transition相同。第15頁16.2.4 定義動畫延遲時間animation-delay用來指定元素動畫開始時間，即動畫延遲播放時間，基本語法格式如下：animation-delay: ,*其中，為數值，單位為s(秒)，其默認值也是0。這個屬性和transition-delayy使用方法是一樣的。第16頁16.2.5 定義動畫播放次數animation-iteration-count用來指定元素播放動畫的循環次數，基本語法格式如下：animation-iteration-count:

11、infinite | , infinite | * 其中，取值為數字，其默認值為1；infinite為無限次數循環。第17頁16.2.6 定義動畫播放方向animation-direction用來指定元素動畫播放的方向，基本語法格式如下：animation-direction: normal | alternate , normal | alternate* 其中，有兩個值，默認值為normal，如果設置為normal時，動畫的每次循環都是向前播放；另一個值是alternate，其作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。第18頁16.2.7 控制播放狀態animation-p

12、lay-state主要用來控制元素動畫的播放狀態，基本語法格式如下：animation-play-state:running | paused , running | paused* 其中，主要有running和paused兩個值。running為默認值。他們的作用就類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設置狀態。第19頁16.2.8 翻轉的圖片本節借助animation屬性來設計自動翻轉的圖片效果，

13、該效果模擬2D平面中實現3D翻轉，在這個動畫中，圖片在X軸上逐漸壓縮，然后水平翻轉圖片，在2D平面中做出3D翻轉效果。詳情見【例16-5】翻轉的圖片。第20頁主要內容16.1 過渡動畫16.2 3D動畫 16.3 漸變效果16.4 案例綜合實戰16.5 本章小結 第21頁16.3 漸變效果16.3.1 線性漸變在Webkit下的應用16.3.2 線性漸變在Mozilla下的應用16.3.3 線性漸變在Opera下的應用16.3.4 線性漸變在IE下的應用第22頁16.3.1 線性漸變在Webkit下的應用Webkit是第一個支持漸變的瀏覽器引擎，其支持漸變的方法如下：-webkit-linea

14、r-gradient( | ,? , , * )/新的寫法-webkit-gradient(, , ?, , ? , *)/傳統寫法webkit-gradient是webkit引擎對漸變的實現參數，一共有5個。第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。第四個和第五個參數，分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0為

15、起點，0.5為中點，1為結束點；第二個表示該點的顏色。第23頁16.3.2 線性漸變在Mozilla下的應用Firefox瀏覽器從3.6版本開始支持漸變設計。Gecko引擎定義了兩個私有函數，分別用來設計線性漸變和徑向漸變。基本語法格式如下：-moz-linear-gradient( | ,? , , * )定義漸變起始點，取值包含數值、百分比，也可以使用關鍵字。參數定義直線漸變的角度。參數定義步長。第24頁16.3.3 線性漸變在Opera下的應用線性漸變在Opera下的使用語法如下：-o-linear-gradient( | ,? , , ); /* Opera 11.10+ */其中的各

16、項參數與Mozilla下的漸變參數相同。例如，要在Opera瀏覽器下實現如圖16-8所示的漸變效果，代碼如下：background: -o-linear-gradient(top,#ccc, #000);第25頁16.3.4 線性漸變在IE下的應用IE依靠濾鏡實現漸變，語法格式如下：filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE*/-ms-filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE8+*/其中，參數startColorstr表示起點的顏色，endColorstr表示終點顏色。Gradien