在頁面中，想讓元素"動起來"可以通過切換圖片的方式，也是常說的逐幀動畫。常規的手段就是通過定時器不斷的切換圖片，配合時間，從而產生連續播放而成動畫。以前只能通利用JS器定時器或者flash達到這個逐幀播放的效果，現在可以通過CSS3的關鍵幀動畫，或者更為先進的“骨骼動畫”來實現，效果也是極好的。
CSS3的Animation有八個屬性
8個屬性中，其中1-7都有相關介紹，但是animation-timing-function是控制時間的屬性，在取值中除了常用到的 三次貝塞爾曲線 以外，還有個很高級的 steps() 函數，steps函數也就是整個圣誕主題的關鍵知識點。steps要配合精靈圖使用，簡單來說就是用來切換多個精靈圖的，形成幀動畫，類似setTimeout的處理感覺
動畫原理：
假如，現在有一組由三張圖合成的雪碧圖，每張圖大小是91*71
如果實現3張圖幀動畫效果，代碼如下
animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
通過定義一個類，類中定義的動畫的一些關鍵數據，比如動畫名，時間，次數，切換的位置
通過keyframes定義動畫具體執行參數與時間段
steps(3)的意思就是：keyframes設置的0%-100%的段中，background-position的的x坐標會變化3次
steps會平分這些段落值，其變化值就是
為什么沒有-273px，這個是steps的具體一個算法，具體可以參考我的博客 深入理解CSS3 Animation 幀動畫
右邊代碼給出了animation的2種寫法，可以具體觀察下，一種是快捷寫法，一種是全寫，注意瀏覽器的兼容性需要加前綴
右邊代碼區域，有一張精靈圖由3張圖組成，每一個圖的大小是91px，現在通過關鍵幀制作3幀動畫，需要寫出對應的keyframes的規則， 主要要兼容一些瀏覽器的前綴
@-webkit-keyframes bird-slow {
0% {
background-position: -0px 0px;
}
100% {
background-position: -273px 0px;
}
}
@-moz-keyframes bird-slow {
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
}
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報