在頁面中，想讓元素"動起來"可以通過切換圖片的方式，也是常說的逐幀動畫。常規(guī)的手段就是通過定時器不斷的切換圖片，配合時間，從而產(chǎn)生連續(xù)播放而成動畫。以前只能通利用JS器定時器或者flash達(dá)到這個逐幀播放的效果，現(xiàn)在可以通過CSS3的關(guān)鍵幀動畫，或者更為先進(jìn)的“骨骼動畫”來實現(xiàn)，效果也是極好的。

CSS3的Animation有八個屬性

1. animation-name ：動畫名
2. animation-duration：時間
3. animation-delay：延時
4. animation-iteration-count：次數(shù)
5. animation-direction：方向
6. animation-play-state：控制
7. animation-fill-mode：狀態(tài)
8. animation-timing-function：關(guān)鍵幀變化

8個屬性中，其中1-7都有相關(guān)介紹，但是animation-timing-function是控制時間的屬性，在取值中除了常用到的 三次貝塞爾曲線 以外，還有個很高級的 steps() 函數(shù)，steps函數(shù)也就是整個圣誕主題的關(guān)鍵知識點。steps要配合精靈圖使用，簡單來說就是用來切換多個精靈圖的，形成幀動畫，類似setTimeout的處理感覺

動畫原理：

假如，現(xiàn)在有一組由三張圖合成的雪碧圖，每張圖大小是91*71

如果實現(xiàn)3張圖幀動畫效果，代碼如下

animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
    0% {background-position-x: -0px}
    100% {background-position-x: -273px}
}

通過定義一個類，類中定義的動畫的一些關(guān)鍵數(shù)據(jù)，比如動畫名，時間，次數(shù)，切換的位置

通過keyframes定義動畫具體執(zhí)行參數(shù)與時間段

steps(3)的意思就是：keyframes設(shè)置的0%-100%的段中，background-position的的x坐標(biāo)會變化3次

steps會平分這些段落值，其變化值就是

1. background-position-x: -0px
2. background-position-x: -91px
3. background-position-x: -182px

為什么沒有-273px，這個是steps的具體一個算法，具體可以參考我的博客 深入理解CSS3 Animation 幀動畫

右邊代碼給出了animation的2種寫法，可以具體觀察下，一種是快捷寫法，一種是全寫，注意瀏覽器的兼容性需要加前綴