利用 CSS animation 和 CSS sprite 製做動畫

CSS3 大大強化了製做動畫的能力，可是若是要作出圖案比較複雜的動畫，選擇 GIF 依然是一個不錯的選擇。今天給你們介紹一個使用 CSS animation 配合雪碧圖(CSS sprite)來製做動畫的方法，能夠作出相似於 GIF 動畫的效果。

CSS3 Animation steps函數

首先看看，CSS3 animation的兼容性。能夠看到基本上主流瀏覽器都支持了 animation 屬性，chrome、safari、opera和移動端的瀏覽器帶上前綴就能夠支持。

利用雪碧圖來製做動畫使用了 CSS3 Animation 裏面的一個重要的函數 steps。

animation 自己是一個複合的屬性，它包含了 animation-name，animation-timing-function，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode 六個屬性。

steps 就是屬於 animation-timing-function 中的一個函數。

animation-timing-function 平時咱們用的比較多的是默認的一些動畫曲線值 ease、ease-in 等等。而 steps 則能夠由咱們控制動畫被分紅多少個部分進行。

steps(n,[start|end]) 傳入一到兩個參數，第一個參數意思是把動畫分紅 n 等分，而後動畫就會平均地運行。第二個參數 start 表示從動畫的開頭開始運行，相反，end 就表示從動畫的結尾開始運行，默認值爲 end。

所以，咱們利用雪碧圖和 steps 函數製做動畫的原理就是，雪碧圖包含了動畫圖片的每一幀，而後利用 steps 函數肯定固定時間內動畫運行的部分等於動畫的幀數，從而實現動畫效果。

動畫實例

用猥瑣的兔斯基作例子╮(￣▽￣")╭

首先咱們要切圖，把動畫的每一幀切成這樣的圖:

切圖若是你們不想折騰，推薦在線合併雪碧圖的工具。

而後寫 keyframes

@-webkit-keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } } @-moz-keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } } @keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } }

調用動畫

#tuski { -webkit-animation: tuski .5s steps(12) infinite; -moz-animation: tuski .5s steps(12) infinite; animation: tuski .5s steps(12) infinite; }

與 GIF 相比，這種動畫能夠讓咱們手動調整動畫運行的速度。

點這裏看完整的代碼。