一、@keyframe
定義和用法
@keyframes是用來創建幀動畫的，我們通過這個屬性可以用純css來實現一些動畫效果。
一般格式是：
@keyframes 動畫名稱{
0%{
動畫開始時的樣式
}
100%{
動畫結束時的樣式
}
}
以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間，瀏覽器可以自動補間，中間也可以設置多個百分比，實現更加多變的動畫效果。
由於@keyframes 屬性是css3新屬性，許多瀏覽器都要加兼容性前綴：
Firefox：-moz-
Opera ：-o-
Safari 和 Chrome：-webkit-
為了獲得最佳的瀏覽器支持，我們始終定義 0% 和 100% 選擇器。
二、animation
定義和用法
animation屬性是寫在要實現動畫的元素的選擇器中的，實現元素的動畫綁定。animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation-name ： 規定需要綁定到選擇器的 keyframe 名稱。
animation-duration ： 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function ： 規定動畫的速度曲線。
animation-delay ： 規定在動畫開始之前的延遲。
animation-iteration-count ： 規定動畫應該播放的次數。
animation-direction ： 規定是否應該輪流反向播放動畫。
語法
animation: name duration timing-function delay iteration-count direction
1.animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數的數學函數來生成速度曲線。我們能夠在該函數中使用自己的值，也可以使用預定義的值：
linear：動畫從頭到尾的速度是相同的。
ease：默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in：動畫以低速開始。
ease-out：動畫以低速結束。
ease-in-out：動畫以低速開始和結束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
2.animation-iteration-count: n | infinite;
n：定義動畫播放次數的數值。
infinite：規定動畫應該無限次播放。
3.animation-direction:normal | alternate;
normal：默認值，動畫正常播放。
alternate：動畫輪流反向播放（動畫在奇數次數正常播放，在偶數次數向后播放）。
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
三、例子
