一、CSS3 過渡
（一）、CSS3過渡簡介
CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。
實現過渡效果的兩個要件：
- 規定把效果添加到哪個 CSS 屬性上
- 規定效果的時長
定義動畫的規則
過渡transition （作用） 將元素的某個屬性從“一個值”在指定的時間內過渡到“另一個值”
（二）、transition屬性
語法 ： {transition： 屬性名 持續時間 過渡方法}
- transition-property 屬性的名字（如果是一個屬性就帶有這個屬性的名字；如果是多個屬性，屬性名之間用逗號隔開；如果是所有屬性，用all表示即可。）表示對哪個屬性進行變化。
- transition-duration 變化持續的時間長度（秒或是毫秒）
- transition-timing-function 過渡實現的方式（比如說，先慢后快/先快后慢），具體實現的時候是以函數來實現的。
- transition-delay 過渡開始前等待的時間，單位為秒或是毫秒。
transition-timing-function 屬性取值
- linear 勻速（線型過渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 開頭慢結尾慢，中間快
實例：
原有的狀態是灰底紅字，鼠標懸停在上面利用transition屬性設置了一個3s 之內的變化，背景為由紅到藍的漸變色，文字顏色也逐漸變成白色。
1、首先定義div標簽的原始狀態，
2、再設置當鼠標懸停在上面的狀態。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>過渡</title> 6 <style> 7 div{ 8 height: 100px; 9 width:300px; 10 line-height:30px; 11 border-radius:5px; 12 align-content:center; 13 color:red; 14 background-color: #999; 15 transition:all 1s linear; 16 } 17 div:hover{ 18 color:white; 19 /*background-color: #007;*/ 20 background:linear-gradient(to bottom,#f0f,#00f) 21 } 22 </style> 23 </head> 24 <body> 25 <div align="center" style="font-size:30px">transition</div> 26 </body> 27 </html>
表現效果：（因為過渡是一個動態的效果，所以下面僅展示初始狀態、中間、過渡后的效果）
初始
中間
最后
二、CSS3動畫
（一）、CSS3中的動畫實現的是什么效果
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變任意多的樣式任意多的次數。動畫效果是通過animation屬性來完成的。
用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。為了得到最佳的瀏覽器支持，應該始終定義 0% 和 100% 選擇器。
實現動畫效果兩要件：
- 1、首先要定義一個動畫 ，定義一個@keyframes 規則（關鍵幀）
- 2、調用動畫 動畫定義好之后，使用animation 屬性調用動畫
了解動畫的形成原理：
是根據人的“視覺暫留”現象，將一組靜止的圖形連續出現后，便形成了動畫。Flash動畫就是基於此原理來制成動畫的，時間軸上的每一幀在編輯區中有不同的圖形，當時間軸上的幀以當前幀頻向前移動時，我們看到的是編輯區中的一組圖形不斷變化，從而產生了運動的視覺效果
（二）、animation屬性設置動畫效果
animation屬性取值
- @keyframes 規定動畫
- animation 所有動畫屬性的簡寫屬性，除了animation-play-state屬性
- animation-name 規定@keyframes 動畫名稱
- animation-duration 規定一個動畫完成的周期所花費的秒或毫秒。默認值為0，
- animation-timing-function 規定動畫的速度曲線。默認值為ease
- animation-delay 動畫開始前等待的時間。取值可為負（-2s 動畫跳過 2 秒進入動畫周期），屬性不兼容 IE 9以及更早版本的瀏覽器.
- animation-iteration-count 規定動畫播放的次數。默認值為1
- animation-direction 規定動畫是否在下一周期逆向地播放。默認值是normal
- animation-play-state 規定動畫是否正在運行或暫停。默認值是running
- animation-fill-mode 規定對象動畫時間之外的狀態
animation-timing-function 屬性取值
- linear 勻速（線型過渡）
- ease 先慢后快再慢
- ease-in 先慢后快
- ease-out 先快后慢
- ease-in-out 開頭慢結尾慢，中間快
實例：
用動畫animation屬性實現在位置變化的同時顏色也發生相應的變化。
顏色：由紅色—黃色—藍色—綠色—紅色；
位置：距左0px距頂0px—距左200px距頂0px—距左200px距頂200px—距左0px距頂200px—距左0px距頂0px（回到原地）
animation屬性：@keyframes(關鍵幀) 動畫名稱為mycolor；一個動畫周期為5s；動畫運動先慢后快再慢ease；動畫開始前等待2s；無限(infinite)循環播放；動畫正在運行(runing)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫</title> 6 <style> 7 div{ 8 width:400px; 9 height:400px; 10 background:red; 11 position:relative; 12 animation-name:mycolor; 13 /*animation-name規定@keyframes 動畫名稱*/ 14 animation-duration:5s; 15 /*animation-duration規定一個動畫完成的周期所花費的秒或毫秒*/ 16 animation-timing-function:ease; 17 /*animation-timing-function規定動畫的速度曲線*/ 18 animation-delay:2s; 19 /*animation-delay規定動畫何時開始。默認值為0*/ 20 animation-iteration-count:infinite; 21 /*animation-iteration-count規定動畫播放的次數*/ 22 animation-direction:alternate; 23 /*animation-driection規定動畫是否在下一周期逆向地播放*/ 24 animation-play-state:running; 25 /*animation-play-state規定動畫是否正在運行或暫停*/ 26 } 27 @keyframes mycolor 28 { 29 0% {background:red;left:0px; top:0px; } 30 25% {background:yellow; left:200px; top:0px;} 31 50% {background:blue;left:200px; top:200px} 32 75% {background:green;left:0px; top:200px;} 33 100% {background:red;left:0px; top:0px;} 34 } 35 </style> 36 </head> 37 <body> 38 <div></div> 39 </body> 40 </html>
除了可以這樣每個屬性單獨設置，也可以使用animation 的簡寫屬性：
1 div{ 2 width:400px; 3 height:400px; 4 background:red; 5 position:relative; 6 animation:mycolor 5s linear 2s infinite alternate; 7 }