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

CSS3的Animation有八個(gè)屬性

1. animation-name ：動(dòng)畫名
2. animation-duration：時(shí)間
3. animation-delay：延時(shí)
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個(gè)屬性中，其中1-7都有相關(guān)介紹，但是animation-timing-function是控制時(shí)間的屬性，在取值中除了常用到的 三次貝塞爾曲線 以外，還有個(gè)很高級(jí)的 steps() 函數(shù)，steps函數(shù)也就是整個(gè)圣誕主題的關(guān)鍵知識(shí)點(diǎn)。steps要配合精靈圖使用，簡(jiǎn)單來(lái)說(shuō)就是用來(lái)切換多個(gè)精靈圖的，形成幀動(dòng)畫，類似setTimeout的處理感覺(jué)

動(dòng)畫原理：

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

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

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

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

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

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

steps會(huì)平分這些段落值，其變化值就是

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

為什么沒(méi)有-273px，這個(gè)是steps的具體一個(gè)算法，具體可以參考我的博客 深入理解CSS3 Animation 幀動(dòng)畫

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