CSS3中動畫屬性有哪些

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

CSS3 動畫

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

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

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

而animation實現動畫效果主要由兩個部分組成：

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

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

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

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

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

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

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

animation-iteration- count、主要用來指定動畫播放的循環次數。

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

animation-play- state，主要用來控制動畫的播放狀態。

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

：關鍵幀

在CSS3中，把@keyframes稱為關鍵幀

@keyframes 的作用：

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

@keyframes的語法：

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

CSS中為元素應用動畫：

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

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

：CSS3動畫8個子屬性詳解

1. animation-name 調用動畫

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

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

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

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

2. animation-duration設置動畫播放時間

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

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

3. animation-timing-function 設置動畫播放方式

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

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

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

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

5. animation-iteration-count 設置動畫播放次數

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

6. animation-direction 設置動畫播放方向

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

7. animation-play-state 設置動畫的播放狀態

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

8. 設置動畫時間外屬性 animation-fill-mode 

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中動畫屬性有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!