CSS3動畫制作的實例介紹

這篇文章主要講解了“CSS3動畫制作的實例介紹”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3動畫制作的實例介紹”吧！

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 就表示從動畫的結尾開始運行。

因此，我們利用雪碧圖和 steps 函數制作動畫的原理就是，雪碧圖包含了動畫圖片的每一幀，然后利用 steps 函數確定固定時間內動畫運行的部分等于動畫的幀數，從而實現動畫效果。
動畫實例

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

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

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

然后寫 keyframes

CSS Code復制內容到剪貼板

1. @-webkit-keyframes tuski {   

2.     0% {   

3.         background-position:0;   

4.     }   

5.     100% {   

6.         background-position: -576px 0;   

7.     }   

8. }   

9. @-moz-keyframes tuski {   

10.     0% {   

11.         background-position:0;   

12.     }   

13.     100% {   

14.         background-position: -576px 0;   

15.     }   

16. }   

17. @keyframes tuski {   

18.     0% {   

19.         background-position:0;   

20.     }   

21.     100% {   

22.         background-position: -576px 0;   

23.     }   

24. }  

調用動畫

CSS Code復制內容到剪貼板

1. #tuski {   

2.     -webkit-animation: tuski .5s steps(12) infinite;   

3.     -moz-animation: tuski .5s steps(12) infinite;   

4.     animation: tuski .5s steps(12) infinite;   

5. }  

與 GIF 相比，這種動畫可以讓我們手動調整動畫運行的速度。

點這里看完整的代碼。

大功告成。

感謝各位的閱讀，以上就是“CSS3動畫制作的實例介紹”的內容了，經過本文的學習后，相信大家對CSS3動畫制作的實例介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！