1、 @keyframes規則
@keyframes規則用於創建動畫，在@keyframes中規定某項css樣式，就能創建由當前樣式逐漸過渡爲新樣式的動畫效果。
定義動畫的方式有兩種：
1）
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes move{
from{
background: #00FFFF;
}
to{
background: #f66;
}
}
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
2）
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes move{
0%{
background: #00FFFF;
}
100%{
background: #f66;
}
}
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果，你可以改變任意多的樣式任意多的次數。關鍵詞"form"和"to"等同於0%和100%，0%是動畫的開始，100%是動畫的完成。
2、將動畫綁定達到選擇器
當在@keyframes中創建動畫時，要把它捆綁到某個選擇器，纔會產生動畫效果。至少要規定以下兩項css3動畫屬性，纔可以把動畫綁定到選擇器：
- 動畫的名稱
- 動畫的時長
例如：把“move”捆綁到div
.wrap{
width: 100px;
height: 100px;
background: #f66;
animation: move 5s;
}
3、CSS3動畫屬性
1）animation-name 定義一個或多個動畫的名稱
2）animation-duration 動畫執行的時間
0：動畫不執行
正數
3）animation-delay 動畫執行的延遲時間
0：不延遲，立即執行
負數：延遲之前的動畫被截斷
正數：按照設置的時間延遲
4）animation-interation-count 設置動畫執行的次數
正數：按照設置的時間執行
infinate：無限循環
5）animation-timing-function 動畫的運動方式
linear、ease、ease-in、ease-out、ease-in-out
6）animation-direction 動畫運動的方向
normal：正常運動
reverse：反向運動
alternate：正反方向交替運動
alternate-reverse：與alternate正好相反
7）animation-fill-mode：設置對象動畫時間之外的狀態
name：默認值
forwad：保持動畫結束時的狀態
backwards：保持動畫開始時的狀態
both：遵循forwards和backwards兩種規則
8）animation-play-state：設置對象動畫的狀態
running：默認值
paused：暫停運動
複雜的寫法：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
簡單的寫法：
div
{
animation: myfirst 5s linear 2s infinite alternate;
}