首頁  >  文章  >  web前端  >  關於使用CSS3製作動畫的方法

關於使用CSS3製作動畫的方法

不言
不言原創
2018-06-20 16:54:142294瀏覽

這篇文章主要介紹了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 函數確定固定時間內動畫運行的部分等於動畫的幀數,從而實現動畫效果。
動畫實例

用猥瑣的兔斯基做例子╮( ̄▽ ̄")╭
2015714161207976.gif (48×48)

首先我們要切圖,把動畫的每一幀切成這樣的圖:
2015714161251094.png (576×48)

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

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

大功告成。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

#相關推薦:



######################### ####關於css過渡和3D效果的簡單實作###############用CSS3繪製打火機動畫火焰的效果############## #######

以上是關於使用CSS3製作動畫的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn