CSS3中動畫屬性有哪些

這篇文章主要介紹了CSS3中動畫屬性有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于開福網(wǎng)站建設(shè)服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供開福營銷型網(wǎng)站建設(shè)，開福網(wǎng)站制作、開福網(wǎng)頁設(shè)計、開福網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務，打造開福網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供開福網(wǎng)站排名全網(wǎng)營銷落地服務。

CSS3 動畫

雖然transition在一定的時間內(nèi)可以實現(xiàn)元素的初始狀態(tài)在指定的時間范圍過渡最終狀態(tài)， 模擬一種過渡動畫效果，但它的功能是非常有限的。 因此，CSS3 新增了一個動畫屬性animation。與過渡屬性transition屬性不同的是，CSS3 的animation屬性可以像Flash制作動畫一樣，通過關(guān)鍵幀控制動畫的每一步， 實現(xiàn)更為復雜的動畫效果。

CSS3中通過animation實現(xiàn)動畫和transition實現(xiàn)動畫非常類似，都是通過改變元素的屬性值來實現(xiàn)動畫效果的。 

它們的區(qū)別主要在于：使用 transition屬性只能通過指定屬性的初始狀態(tài)和結(jié)束狀態(tài)，然后在兩個狀態(tài)之間進行平滑過渡的方式來實現(xiàn)動畫。 

而animation實現(xiàn)動畫效果主要由兩個部分組成：

1). 通過類似Flash動畫中的關(guān)鍵幀來聲明一個動畫； 

2). 在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫，從而實現(xiàn)一個更為復雜的動畫效果。

CSS3動畫屬性animation和CSS3的transition屬性一樣是一個復合屬性，它包含了8個屬性：

animation-name，主要用來指定一個關(guān)鍵幀動畫的名字，這個動畫名必須對應一個@keyframes規(guī)則。CSS加載時會應用animation-name指定的動畫， 從而執(zhí)行動畫。

animation-duration，主要用來設(shè)置動畫播放所需時間，一般以秒為單位。

animation-timing- function主要用來設(shè)置動畫的播放方式，與transition-timing-function類似。

animation-delay、主要用來指定動畫開始時間，一般以秒為單位。

animation-iteration- count、主要用來指定動畫播放的循環(huán)次數(shù)。

animation-direction、主要用來指定動畫的播放方向。

animation-play- state，主要用來控制動畫的播放狀態(tài)。

animation-fill- mode，主要用來設(shè)置動畫的時間外屬性。

：關(guān)鍵幀

在CSS3中，把@keyframes稱為關(guān)鍵幀

@keyframes 的作用：

transition制作一個簡單的動畫效果時，包括了元素的初始屬性和最終屬性，一個開始執(zhí)行動作時間和一個延遲動作時間以及一個動作變換速率， 其實這些值都是一個中間值，如果要控制得更細一些，比如說要第一個時間段執(zhí)行什么動作，第二個時間段執(zhí)行什么動作（換到Flash制作動畫中來說，就是第一幀要執(zhí)行什么動作，第二幀執(zhí)行什么動作）， 這樣用transition 就很難實現(xiàn)了，此時也需要一個“ 關(guān)鍵 幀”來控制。 在CSS3中就是通過@keyframes屬性來實現(xiàn)這樣的效果的。

@keyframes的語法：

@keyframes具有其自己的語法規(guī)則，命名是由@keyframes開頭，后面緊跟著是“動畫的名稱”加上一對花括號“{...}”，括號中就不同時間段樣式規(guī)則，有點像CSS的樣式寫法。一個@keyframes中的樣式規(guī)則是由多個百分比構(gòu)成的，如0%～100%，可以在這個規(guī)則中創(chuàng)建更多個百分比，分別給每個百分比中需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如說移動，再比如改變元素顏色、位置、大小和形狀等。 不過有一點需要注意， 可以使用“ frome”“to”代表一個動畫是從哪開始，到哪結(jié)束，也就是說from就相當于0%，而to相當于100%。值得說的是，0%不能像別的屬性取值一樣把百分比符號省略，在這里必須加上百分符號（%）。如果沒有加上，這個@keyframes是無效的，不起任何作用。因為@keyframes的單位只接受百分比值。@keyframes可以指定任何順序排列來決定animation動畫變化的關(guān)鍵位置

CSS中為元素應用動畫：

http:/ /www.iis7.com/a/lm/yczmljgj/

要在CSS中為元素應用動畫， 首先要創(chuàng)建一個已命名的動畫，然后將它附加到該元素屬性聲明塊中的一個元素上。 動畫本身并不執(zhí)行任何操作； 為了向元素應用動畫，需要將動畫與元素關(guān)聯(lián)起來。這個要創(chuàng)建的動畫，必須使用@keyframes來聲明（或者對于當前的Webkit實現(xiàn)，使用@-webkit-keyframes），后跟所選擇的名稱，該名稱主要用于對動畫的聲明作用，然后指定關(guān)鍵幀。

：CSS3動畫8個子屬性詳解

1. animation-name 調(diào)用動畫

animation-name屬性，主要是用來調(diào)用動畫，其調(diào)用的動畫是通過@keyframes關(guān)鍵幀定義好的動畫。 該屬性的使用語法如右所示： animation-name: none | IDENT[ none| DENT]*;

animation-name 是用來定義一個動畫的名稱， 其主要有兩個值。 

·IDENT：是由@keyframes創(chuàng)建的動畫名稱， 換句話說 此處的 IDENT(標識符)需要和@keyframes中的IDENT一致， 如果不一致將不能實現(xiàn)任何動畫效果。 

·none：為默認值，當值為none 時，將沒有任何動畫效果，其可以用于覆蓋任何動畫。

2. animation-duration設(shè)置動畫播放時間

animation-duration主要用來設(shè)置CSS3動畫播放時間， 其基本語法如右所示： animation- duration: < time>[< time>]* 

animation-duration和transition-duration使用方法類似，是用來指定元素播放動畫所持續(xù)的時間，也就是完成從0% ～100% 一次動畫所需時間， 取值< time>為數(shù)值，單位為秒，其默認值為 0，這意味著動畫周期為0，也就是沒有動畫效果。如果值為負值會被視為0。

3. animation-timing-function 設(shè)置動畫播放方式

animation-timing-function屬性主要是用來設(shè)置動畫播放方式， 其基本語法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out

animation-timing-function是指元素根據(jù)時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。 他和transition中的transition-timing-function一樣， 具有以下幾種變換方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。

4. animation-delay 設(shè)置動畫開始播放的時間

animation-delay屬性用來定義動畫開始播放的時間、 是延遲還是提前等。 該屬性的基本語法右所示： animation- delay:< time>[,< time>]* 換句話說， animation- delay 屬性用于定義在瀏覽開始 執(zhí)行動畫之前等待的時間。

5. animation-iteration-count 設(shè)置動畫播放次數(shù)

animation-iteration-count 屬性主要用來定義動畫的播放次數(shù)。其基本語法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此屬性主要用于定義動畫播放多少次，其值通常為整數(shù)，但也可以使用帶有小數(shù)的數(shù)字。其默認值 1，這意味著動畫將從開始到結(jié)束只播放一次。 如果取值為infinite，動畫將會無限次地播放。infinite(無限循環(huán))

6. animation-direction 設(shè)置動畫播放方向

animation-direction屬性主要用來設(shè)置動畫播放方向， 其基本語法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用來指定元素動畫播放的方向， 其主要有兩個值， 默認值為 normal， 如果設(shè)置為normal時， 動畫的每次循環(huán)都是向前播放； 另一個值是alternate，它的作用是，動畫播放為偶數(shù)次則向前播放，為奇數(shù)次則向反方向播放。 例如一個彈跳動畫中， 可以為落下的球提供關(guān)鍵幀， 然后將animation-direction取值為alternate來控制播放動畫的每秒中反轉(zhuǎn)它。

7. animation-play-state 設(shè)置動畫的播放狀態(tài)

animation-play-state屬性主要用來控制元素動畫的播放狀態(tài)， 其基本語法如右所示： animation-play-state: running | paused [, running | paused]* 主要有兩個值： running 和paused。 其中running為默認值， 主要作用類似于音樂播放器， 可以通過paused將正在播放的動畫停下來， 也可以通過running將暫停的動畫重新播放， 這里的重新播放不一定是從元素動畫的開始播放， 也可能是 從暫停的那個位置開始播放。 另外如果暫停了動畫的播放， 元素的樣式將回到最原始設(shè)置狀態(tài)。

8. 設(shè)置動畫時間外屬性 animation-fill-mode 

animation-fill-mode屬性定義在動畫開始之前和結(jié)束之后發(fā)生的操作，其基本語法如右所示： animation-fill-mode: none | forwards | backwards | both  主要有四個值：none、forwards、backwards和both。其默認值為none，表示動畫將按預期進行和結(jié)束，在動畫完成其最后一幀時，動畫會反轉(zhuǎn)到初始幀處。當其取值為forwards時，動畫在結(jié)束后繼續(xù)應用最后關(guān)鍵幀的位置。當其取值為backwards時，會在向元素應用動畫樣式時迅速應用動畫的初始幀。當其取值為both時，元素動畫同時具有forwards和backwards效果。在默認情況之下，動畫不會影響它的關(guān)鍵幀之外的 屬性， 但使用animation-fill-mode屬性， 可以修改動畫的默認行為。簡單地理解就是告訴動畫在第一個關(guān)鍵幀上等待動畫開始，或者在動畫結(jié)束時停在最后一個關(guān)鍵幀上而不回到動畫第一幀 上， 或者同時具有這兩個效果。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中動畫屬性有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

網(wǎng)站題目：CSS3中動畫屬性有哪些
文章源于：http://muchs.cn/article32/ghipsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、小程序開發(fā)、關(guān)鍵詞優(yōu)化、ChatGPT、外貿(mào)建站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)