利用 CSS animation 和 CSS sprite 制作動畫

陳偉發布于2019-08-28 18:08 / 2659人閱讀

摘要：今天給大家介紹一個使用配合雪碧圖來制作動畫的方法，可以做出類似于動畫的效果。利用雪碧圖來制作動畫使用了里面的一個重要的函數。

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 相比，這種動畫可以讓我們手動調整動畫運行的速度。

點這里看完整的代碼。

大功告成。

感謝您的閱讀，有不足之處請為我指出。

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

GPU云服務器云服務器 css3動畫高性能css3動畫 css制作 css和html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111043.html

CSS3幀動畫

摘要：在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續播放，從而形成動畫。使用改造之后的代碼，利用偽類進行背景填充，然后控制該元素移動來實現逐幀動畫。在制作幀動畫的時候，一般采用雪碧圖的方式，通過切換圖片的位置，使其連續播放，從而形成動畫。雪碧圖雪碧圖的制作可以使用compass制作，還可以使用一些小工具進行制作，提供一個在線制作雪碧圖的網站。CSS Sprite...

Nino 2019-08-30 15:53 評論0 收藏0
進入 CSS3 動畫

摘要：我最近有機會深入研究一些動畫。下一步是添加動畫效果并確定它們何時發生。創建關鍵幀后，您可以將動畫稱為屬性。點擊動畫使用上面的關鍵幀和動畫語法，這里是我用來在本頁頂部的中制作動畫的代碼。我最近有機會深入研究一些CSS3動畫。我使用了像animate.css這樣的庫，用javascript完成了動畫，但從未做過任何自定義的CSS3工作原文任務我們最近在SeatGeek更新了我們的...

lindroid 2019-08-30 15:44 評論0 收藏0
記一次游戲H5開發經驗

摘要：為了實現物體隨機出現的效果，讓每個物體隨機多少秒后開始出現最后一個物體出現完，多少秒后出現結束畫面等等，需要理清楚各個定時器的關系，并對其添加語義化良好的標記，及時對未完結的定時器進行清除，防止定時器帶來的意想不到的問題。快到年終的時候做了一個以游戲形式展示的h5活動頁，第一次嘗試使用js寫小游戲，很有趣的過程，很寶貴的經驗。效果圖直接上個效果的gif圖，游戲的一小部分效果，錄出...

xingpingz 2019-08-20 15:25 評論0 收藏0
記一次游戲H5開發經驗

摘要：為了實現物體隨機出現的效果，讓每個物體隨機多少秒后開始出現最后一個物體出現完，多少秒后出現結束畫面等等，需要理清楚各個定時器的關系，并對其添加語義化良好的標記，及時對未完結的定時器進行清除，防止定時器帶來的意想不到的問題。快到年終的時候做了一個以游戲形式展示的h5活動頁，第一次嘗試使用js寫小游戲，很有趣的過程，很寶貴的經驗。效果圖直接上個效果的gif圖，游戲的一小部分效果，錄出...

GitChat 2019-08-01 16:35 評論0 收藏0