通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及JavaScript。
CSS3動畫有哪些實現方式？
Transitions 、transforms和 Animations
Transitions特點：平滑的改變CSS的值
transforms特點：變換主要實現（拉伸，壓縮，旋轉，偏移）
Animations特點：適用於CSS2，CSS3
animation & transition的相同點和不同點？
相同點：
都是隨着時間改變元素的屬性值。
不同點：
transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性；
初始效果——最終的效果之間的變化；
animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值
初始效果———動畫幀———動畫幀————最終的效果
瀏覽器支持
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
注釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。
1 /* @keyframes */ 2 @keyframes mymove{} 3 @‐webket‐keyframes mymove{} 4 /* animation */ 5 animation{} 6 ‐webket‐animation{}
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
今天我們說一下動畫屬性Animation，單從Animation字面上的意思，我們就知道是“動畫”的意思。
如需在 CSS3 中創建動畫，我們需要先來學習 @keyframes 規則。
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西並不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西。
關鍵幀屬性 @keyframe
不同於過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，
或者用關鍵幀的話來說，過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀，
而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。
語法：( 0% = from 100% = to )
1 @keyframes mymove{ 2 from{初始狀態屬性} 3 to{結束狀態屬性} 4 }
1 @keyframes mymove{ 2 0%{初始狀態屬性} 3 50%{中間再可以添加關鍵幀} 4 100%{結束狀態屬性} 5 }
實例：改變顏色
1 @keyframes myfirst2 { 3 from {background: red;} 4 to {background: yellow;} 5 }
實例：改變背景色和位置
1 @keyframes myfirst2 { 3 0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;} 5 50% {background: blue; left:200px; top:200px;} 6 75% {background: green; left:0px; top:200px;} 7 100% {background: red; left:0px; top:0px;} 8 }
Animation 屬性：
當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：
- 規定動畫的名稱
- 規定動畫的時長
1、animation-name 動畫名稱(必要的)
必須與規則@keyframes配合使用，
1 @keyframes mymove{ 2 from {background: red;} 3 to {background: yellow;} 4 } 5 div{animation‐name:mymove;}
2、animation-duration持續時間(必要的)
1 animation‐duration:3s;
3、animation-timing-function 過渡類型
屬性值
- linear：線性過渡。
- ease：平滑過渡。
- ease-in：由慢到快。
- ease-out：由快到慢。
- ease-in-out：由慢到快再到慢。
- step-start:馬上跳到動畫每一結束楨的狀態【實現逐幀動畫效果】
1 animation‐timing‐function:linear;
4、animation-delay 延遲時間
1 animation‐delay:0.5s;
5、animation-iteration-count 循環次數
屬性值infinite：無限循環
number: 循環的次數；默認是1，可以設置其它數值 如：2 3...
1 animation‐iteration‐count:infine;
6、animation-direction 運動方向
屬性值
normal：正常方向 0-100%
reverse：反方向運行 100-0%
alternate：動畫先正常運行再反方向運行，並持續交替運行 0-100-0%
alternate-reverse：動畫先反運行再正方向運行，並持續交替運行 100-0-100%
1 animation‐direction:normal;
7、animation-fill-mode 屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放
時），要應用到元素的樣式。
屬性值
- none 默認值。延遲之后，執行0%時，里面的效果
- backwards 延遲之前，執行0%時，里面的效果
- forwards 在動畫結束后，停留在動畫結束的位置。【重點記憶】
- both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫初始執行0%，結束停留到結束的
- 位置。
1 animation‐fill‐mode:forwads;
8、animation-play-state 動畫狀態
屬性值
- running:運動
- paused: 暫停; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行(一般使用在划過的效果里面)
1 div:hover{animation‐play‐state:paused;}
9、簡寫animation
animation：動畫名稱 動畫持續時間 過渡類型 延遲時間 循環 運動方向
（ 2個時間：第一個時過渡時間 ；第二個時延遲時間 ）
1 animation：mymove 2s linear 0.5s infine alternate;
推薦：一款強大的預設css3動畫庫。
官網地址：https://daneden.github.io/animate.css/
引入：
<link rel="stylesheet" href="animate.min.css">
基本使用：
- animated 類（必需）--- 基類(基礎的樣式，每個動畫效果都需要加)
- infinite 類 -- 循環運動
1 /* bounce 為選中的動畫效果名稱 */ 2 <h1 class="animated infinite bounce">Example</h1>
拓展：瀏覽器前綴
- -ms- IE瀏覽器專屬的CSS屬性需添加-ms-前綴
- -moz- 所有基於Gecko引擎的瀏覽器（如Firefox）專屬的CSS屬性需添加-moz-前綴
- -o- Opera瀏覽器專屬的CSS屬性需添加-o-前綴
- -webkit- 所有基於Webkit引擎的瀏覽器（如Chrome、Safari）專屬的CSS需添加-webkit-前綴