CSS3 大大強(qiáng)化了制作動(dòng)畫的能力，但是如果要做出圖案比較復(fù)雜的動(dòng)畫，選擇 GIF 依然是一個(gè)不錯(cuò)的選擇。今天給大家介紹一個(gè)使用 CSS animation 配合雪碧圖(CSS sprite)來制作動(dòng)畫的方法，可以做出類似于 GIF 動(dòng)畫的效果。

CSS3 Animation steps函數(shù)

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

利用雪碧圖來制作動(dòng)畫使用了 CSS3 Animation 里面的一個(gè)重要的函數(shù) steps。

animation 本身是一個(gè)復(fù)合的屬性，它包含了 animation-name，animation-timing-function，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode 六個(gè)屬性。

steps 就是屬于 animation-timing-function 中的一個(gè)函數(shù)。

animation-timing-function 平時(shí)我們用的比較多的是默認(rèn)的一些動(dòng)畫曲線值 ease、ease-in 等等。而 steps 則可以由我們控制動(dòng)畫被分成多少個(gè)部分進(jìn)行。

steps(n,[start|end]) 傳入一到兩個(gè)參數(shù)，第一個(gè)參數(shù)意思是把動(dòng)畫分成 n 等分，然后動(dòng)畫就會(huì)平均地運(yùn)行。第二個(gè)參數(shù) start 表示從動(dòng)畫的開頭開始運(yùn)行，相反，end 就表示從動(dòng)畫的結(jié)尾開始運(yùn)行，默認(rèn)值為 end。

因此，我們利用雪碧圖和 steps 函數(shù)制作動(dòng)畫的原理就是，雪碧圖包含了動(dòng)畫圖片的每一幀，然后利用 steps 函數(shù)確定固定時(shí)間內(nèi)動(dòng)畫運(yùn)行的部分等于動(dòng)畫的幀數(shù)，從而實(shí)現(xiàn)動(dòng)畫效果。

動(dòng)畫實(shí)例

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

首先我們要切圖，把動(dòng)畫的每一幀切成這樣的圖:

切圖如果大家不想折騰，推薦在線合并雪碧圖的工具。

然后寫 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;} }

調(diào)用動(dòng)畫

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

與 GIF 相比，這種動(dòng)畫可以讓我們手動(dòng)調(diào)整動(dòng)畫運(yùn)行的速度。

點(diǎn)這里看完整的代碼。

大功告成。

感謝您的閱讀，有不足之處請(qǐng)為我指出。

本文同步于我的個(gè)人博客 http://blog.acwong.org/2015/03/23/make-animation-with-steps-and-css-sprite/

總結(jié)

以上是生活随笔為你收集整理的利用 CSS animation 和 CSS sprite 制作动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。