動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果。通過 CSS3，能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
如需在 CSS3 中創建動畫，需要學習 @keyframes 規則。
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。通過 animation 相關動畫屬性完成整個 CSS3 動畫效果。
1.@keyframes 指定動畫名稱和動畫效果
@keyframes定義的動畫名稱用來被animation-name所使用。
定義動畫時，簡單的動畫可以直接使用關鍵字from和to，即從一種狀態過渡到另一種狀態。
語法：
@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]
取值：
- <identifier>：identifier定義一個動畫名稱
- <keyframes-blocks>：定義動畫在每個階段的樣式，即幀動畫
示例：
@keyframes testanimations {
from { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20); }
80% { transform: translate(80px, 0); }
to { transform: translate(100px, 20px); }
}
/* 或者 */
@keyframes testanimations{
0% { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20px); }
80% { transform: translate(80px, 0); }
100% { transform: translate(100px, 20px); }
}
2.animation-name 檢索或設置對象所應用的動畫名稱
必須與規則 @keyframes 配合使用，因爲動畫名稱由@keyframes定義。如果提供多個屬性值，以逗號進行分隔。
語法：
animation-name：<single-animation-name>[,<single-animation-name>]
<single-animation-name> = none | <identifier>
取值：
- none：不引用任何動畫名稱
- <identifier>：定義一個或多個動畫名稱(identifier標識)
示例：
@keyframes slide{
0%{transform:scale(0);opacity:0;}
40%{transform:scale(1);opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes slide{
0%{-webkit-transform:scale(0);opacity:0;}
40%{-webkit-transform:scale(1);opacity:1;}
100%{opacity:1;}
}
.slide-box{
animation-name: slide;
}
3.animation-duration 設置對象動畫的持續時間
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-duration：<time>[,<time>]
取值：
- <time>：指定對象動畫的持續時間
示例：
.slide-box{
animation-duration: .8s;
}
4.animation-timing-function 設置對象動畫的過渡類型
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]
<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
取值：
- linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
- ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
- step-start：等同於 steps(1, start)
- step-end：等同於 steps(1, end)
- steps(<integer>[, [ start | end ] ]?)：接受兩個參數的步進函數。第一個參數必須爲正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值爲end。
- cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
示例：
.slide-box{
animation-timing-function: ease-in;
}
5.animation-delay 設置對象動畫的延遲時間
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-delay：<time>[,<time>]
取值：
- <time>：指定對象動畫延遲的時間
示例：
.slide-box{
animation-delay: .5s;
}
6.animation-iteration-count 設置對象動畫的循環次數
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]
<single-animation-iteration-count> = infinite | <number>
取值：
- infinite：無限循環
- <number>：指定對象動畫的具體循環次數
示例：
.slide-box{
animation-iteration-count: infinite;/* 無限循環 */
}
7.animation-direction 設置對象動畫在循環中是否反向運動
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-direction：<single-animation-direction>[,<single-animation-direction>]
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
取值：
- normal：正常方向
- reverse：反方向運行
- alternate：動畫先正常運行再反方向運行，並持續交替運行
- alternate-reverse：動畫先反運行再正方向運行，並持續交替運行
示例：
.slide-box{
animation-direction: reverse;/* 反方向運行循環 */
}
8.animation-play-state 設置對象動畫的狀態
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-play-state：<single-animation-play-state>[,<single-animation-play-state>]
<single-animation-play-state> = running | paused
取值：
- running：運動
- paused：暫停
示例：
.slide-box{
animation-play-state: running;
}
9.animation-fill-mode 設置對象動畫時間之外的狀態
如果提供多個屬性值，以逗號進行分隔。
語法：
animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]
<single-animation-fill-mode> = none | forwards | backwards | both
取值：
- none：默認值。不設置對象動畫之外的狀態
- forwards：設置對象狀態爲動畫結束時的狀態
- backwards：設置對象狀態爲動畫開始時的狀態
- both：設置對象狀態爲動畫結束或開始的狀態
示例：
.slide-box{
animation-fill-mode: backwards;
}
10.animation 複合屬性，設置對象所應用的動畫特效
如果提供多組屬性值，以逗號進行分隔。
注意：如果只提供一個<time>參數，則爲 <' animation-duration '> 的值定義；如果提供二個<time>參數，則第一個爲 <' animation-duration '> 的值定義，第二個爲 <' animation-delay '> 的值定義。
語法：
animation：<single-animation>[,<single-animation>]
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
取值：
- <' animation-name '>：檢索或設置對象所應用的動畫名稱
- <' animation-duration '>：檢索或設置對象動畫的持續時間
- <' animation-timing-function '>：檢索或設置對象動畫的過渡類型
- <' animation-delay '>：檢索或設置對象動畫延遲的時間
- <' animation-iteration-count '>：檢索或設置對象動畫的循環次數
- <' animation-direction '>：檢索或設置對象動畫在循環中是否反向運動
- <' animation-fill-mode '>：檢索或設置對象動畫時間之外的狀態
- <' animation-play-state '>：檢索或設置對象動畫的狀態。w3c正考慮是否將該屬性移除，因爲動畫的狀態可以通過其它的方式實現，比如重設樣式
示例：
.slide-box{
-webkit-animation:animations 2s ease-out forwards;
animation:animations 2s ease-out forwards;
}