動畫就是由一個個的關鍵幀組成的。
想實現一個動畫的效果，這個時候
1.需要先預設一個動畫
@keyframes cc {
/* 動畫序列：時間節點 */
/* 開始狀態 */
/* 節點設置 */
/* 寫CSS屬性 */
from {
transform: translateX(0px);
}
/* 結束狀態 */
to {
transform: translateX(500px);
}
/* ************************************百分數 */
0% {
/* 節點設置 */
/* 寫CSS屬性 */
transform: translateX(0px);
}
50% {
transform: translateX(800px);
}
100% {
/* 注意點：節點狀態一定是在上一個節點狀態上進行 */
transform: translateX(800px) translateY(600px);
}
}
百分比指的是動畫耗時（animation-duration）的時間比
2.設置動畫屬性
先來一個綜合寫法
animation: name duration timing-function delay iteration-count direction fill-mode;
其中兩個必要的屬性就是
1.animation-name：cc; 你用@keyframe設置的動畫的名字
2.anmation-duration：3s； 動畫耗時
3.animation timing-function ：運動速度
默認屬性ease（低速開始，加快，低速結束） linear（勻速運動） ease-in（低速開始）
ease-out（低速 結束 ）ease-in-out 低速開始和結束 steps（n）動畫分成n步來完成
效果圖 http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function
4.animation-delay ：2s； 延遲時間
5.animation-interation-count：2/infinite（無限次） 動畫響應的次數（interation英文意思相互影響）
6.animation-direction: 循環方向
默認normal(默認0~100) / alternate(0~100~0)/ reverse(100~0)/
alternate-reverse(100~0~100)
7.animation-fill-mode 動畫等待或者結束時候的狀態
forwards 初始狀態不能立即執行0%的狀態，執行動畫完成后保留最后狀態
backwards 如在0%時候設置樣式，立即執行。動畫完成后不會保留最后的結果（有延遲）
both 既能立即執行設置的樣式，也會保留最后的結果。
8.animation-play-state （不在簡寫內） 播放和暫停狀態 paused暫停 running 播放
3.組動畫 ，讓幾個動畫同時執行